How can I remove "border-top-width" css style? - css

Let's say I have a Button with the following CSS style:
Button {
border:2px #eee solid;
border-top-width: 5px;
}
This will generate a button that has a 2px border in color #eee, except the top border will be 5px in thickness.
Now, let's say I have another button that inherits this style, but for this new Button I would like to remove the border-top-width property.
So my question is, how can I set border-top-width to null or to listen to the default border style? The following doesn't work but shows what I'm trying to do:
Button.class-name {
border-top-width: auto;
}
Note that in my situation, I can't just set the value to "2px". I need to remove the value entirely. I've tried "auto", "inherit", "initial", etc... and nothing seems to remove the "border-top-width" property...
Any ideas?

CSS proposes an initial value which would reset it to the default value for the browser.
There is no way (and no proposed way) to set it to the value set by the previous but one rule that set it.
If you want it to take the value from border:2px #eee solid; then you must explicitly set it to 2px.
If you were using a CSS preprocessor, such as SASS, you could use a variable:
$defaultBorderWidth: 2px;
Button {
border:$defaultBorderWidth #eee solid;
border-top-width: 5px;
}
Button.class-name {
border-top-width: $defaultBorderWidth;
}
You could also use this technique with native CSS variables.

You can just use the class to set the width of the button that should be 5px on top:
button {
border:2px #eee solid;
}
button.class-name {
border-top-width: 5px;
}
You can, also, use the :not() CSS selector:
button{
border:2px #eee solid;
}
button:not(.normal) {
border-top-width: 5px;
}
Fiddle

You can use like this if you want your top border-top-width is null;
HTML code
<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>
CSS code:
button{
border:2px #eee solid;
border-top-width: 5px;
}
button.leave-me{
border-top-width:initial;
}
JSFIDDLE

Eighter you put the border-top-width on your
button.class-name
Or instead of calling that property on the css, try calling it directly on your html.
Or, you can also, on the second button, call
border-top-width:2px;

Related

How to change a button from curved corner to sharp?

I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button

How can I change the borders of mask div?

How can I change the borders of Mask div ?, I am using 3.0.6 gxt.
final Portlet portlet = new Portlet();
portlet.mask("Loading Requests ....");
I want to add the style to say not to show any borders in the mask div, how to do that ?
I tried to override ext-all.js with my css, but didn't work (hoping x-mask & x-mask-msg are the css class names )
.x-mask {
border: 0px solid #a3bad9 !important;
}
.x-mask div {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg div {
border: 0px solid #a3bad9 !important;
}
I think you are going to have to create an appearance. Here is Sencha's guide to doing that in gxt 3: https://docs.sencha.com/gxt-guides/3/concepts/appearance/Appearance_3.html
The appearance that you'll want to override should be Css3MaskAppearance. I'm not sure which part of the .css it will go in, I'm guessing .mask or .box but you should be able to add borders: 0px; and they should disappear.

CSS Specificity for transparent and none border

I'm styling the page which has consecutive boxes with bottom border except for the last box. I applied class .box for all the boxes and added .box_last to hide the border only for the last box.
.box {
border-bottom-style: solid;
}
.box_last {
border-bottom-style: transparent;
}
However, I realized that the browser is still applying my .box styling. But when I changed the .box_last from transparent to none, the browser overrode the first style and the border is disappeared.
I have searched for a few CSS specificity articles but hasn't got the answer yet. Can anyone explain for me? Thanks in advances.
The reason border-bottom-style: transparent; is not working is because transparent is a color, not a style. This should work fine:
.box_last {
border-bottom-color: transparent;
}
Or without an extra class:
.box:last-child {
border-bottom-color: transparent;
}

Reset input style for checkboxes to default in IE

I have a CSS rule for input like this:
input {
border: 1px solid black;
}
The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:
instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:
I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:
<input type="checkbox" class="checkbox" />
Is there any way to reset the border style with the .checkbox rule?
I have tried:
.checkbox {
border: none;
}
which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:
.checkbox {
border: 1 none transparent;
}
but none of these seems to reset to the default style of the checkboxes in IE.
Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?
In many browsers, it's not possible to reset the checkbox back to the default native style.
This is probably the reason why CSS resets generally do not include a rule to this effect:
input {
border: 0;
}
The most compatible technique is to do this:
input[type="text"], input[type="password"] {
border: 1px solid black;
}
and explicitly list every type of input you wish to style.
See: http://jsfiddle.net/EPpJ9/
This will work in IE7+ and all modern browsers.
You could also do this more neatly with the not() CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:
input:not([type="checkbox"]) {
border: 1px solid black;
}
In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+
First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.
<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>
Next include some css:
#mycheckbox {
display: none;
}
Draw your checkbox using your label control, here is one I made:
#mylabel {
float: left;
margin-top: 11px;
background-color: #fff;
border: 1px solid #000;
display: block;
height: 12px;
width: 12px;
margin-right: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-position: left center;
}
You have to create a look for when the box is checked:
#mylabel.checked {
background-color: #808080;
}
Finally some jquery:
$(document).ready(function () {
$("#mycheckbox").change(function () {
if ($("#mycheckbox").is(":checked")) {
$("#mylabel").addClass("checked", "checked");
} else {
$("#mylabel").removeClass("checked");
}})
});
Don't forget to include the jquery libraries (put this in your head tag):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check out the fiddle to see it in action:
fiddle
Couldn't you include ie8-js to make IE8 recognize not() CSS3 pseudo-class?
http://code.google.com/p/ie7-js/
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

How to use CSS to square the corner on a submit button

How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.

Resources