I have a button which is using a class formBtn
in css
.formBtn {color:#fff; background-color:#518ACD; border-color:#ccc #000 #000 #ccc; font- size:11px; font-weight:bold;}
in HTML
<html:submit styleClass="formBtn" value="Add"/>
Suggest me something so that I can use the same class name for a disabled button and show it in a different manner (say background-color:Grey). I may be using the style class like this
in HTML
<html:submit styleClass="formBtn" value="Disabled Add" disabled="true"/>
Use the :disabled pseudoclass.
.formBtn:disabled { background-color: grey; }
[attribute=value] selector should work IE7, don't know about IE6 if you care.
.formBtn[disabled=true] { background: gray}
If you have "Disabled" word in values you could do something like:
.formBtn[value~=Disabled] { background: gray}
Related
I want to target some woocommerce elements on my website and change color and make some css changes. When using the inspector on my website I find:
<div class="woocommerce-form-coupon-toggle">
and assume I could write the following as a css code in wordpress
.woocommerce-form-coupon-toggle {
background-color #000000 !important;
}
When doing this, nothing happens.
The property and value in CSS should be separated by a colon :. Like the following:
.woocommerce-form-coupon-toggle {
background-color: #000000 !important;
}
Try to check for the whole tree, class by class. it should become a larger property, but would work.
body class1 class2 .woocommerce-form-coupon-toggle {
background-color: #000000 !important;
};
I assume you are styling the toggle coupon form in the checkout form. See image
You should be styling the .woocommerce-form-coupon-toggle .woocommerce-info not the .woocommerce-form-coupon-toggle alone.
To do this try this code.
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
background-color: #000000 !important;
}
I have this CSS:
html.darkBlue .btn1 button:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
I am rather confused about disabled. How can I make it so that this CSS does not work if the button is disabled?
If you don't need to support IE < 9 you could use the :enabled pseudo class.
html.darkBlue .btn1 button:hover:enabled {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
Try with (demo http://jsfiddle.net/JDNLk/)
HTML
<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>
CSS
html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
You can use the negation pseudo class selector (CSS 3). I am not sure if there is also a solution using attribute selectors (CSS 2.1).
Given this html
<div class="darkBlue">
<h2>disable hover for disabled buttons</h2>
<div class="btn2">
<button>hover enabled</button> <br/>
<button disabled="disabled">hover disabled</button>
</div>
</div>
and this css
.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
you can achive that every button inside the matiching selector has no hover-style applied.
See this example.
At caniuse.com you can find tables that compare which browser supports which selector
browser support for css2 selectors
browser support for css3 selectors
Update using a hack to be able to use css2 selectors
This is a hack and is yet not exactly the same but in case you are restricted to css 2.1 this may be a starting point. If you define a seperate style-rule for disabled buttons and use the color that you picked for disabled buttons you can fake a disabled hover-style:
.btn3 button[disabled="disabled"]:hover
{
background-color: rgb(212, 208, 200);
color: rgb(128, 128, 128);
}
It worked for me after adding the ":enabled" selector as following :
element-class:hover:enabled {
properties...
}
Use the CSS :Not attribute selector to only target elements that don't have the disabled attribute.
html.darkBlue .btn1 button:not([disabled]):hover
That way your hover style will only be applied to buttons that are not disabled.
.btn:disabled:hover{color:default-color;background:default prop}
. or .btn:disabled{pointer-events:none}
I have a custom button implemented as an anchor. The button has an image and text.
When the button has focus, I would like to style it differently. Specifically, I would like to draw a dotted rectangle around the image and text. I would also would like to additionally style it based on another class.
Here's the button code:
<a id="searchButton" class="button" href="#">
<span class="icon-search"></span>
Search
</a>
Here's the CSS code with my questions:
button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}
You have "button" but it should be ".button" instead since your tag is not a button, but rather your class.
.button:focus {
outline: #00FF00 dotted thick;
}
In regards to the question, "How do I refer to another class that has additional stylings?", I believe you would need a library like SASS, LESS or some other dynamic stylesheet language because that type of functionality is not currently supported by CSS natively.
You refer to a class by prefixing it with a dot (.), like so:
.button { /* styles go here */ }
You can achieve the desired effect with outline: 1px dotted gray;
.button:focus {
outline: 1px dotted gray;
}
ASP.NET
When TextBox1.Enabled = false; it has a gray background in FF3, but no change in IE8 or Chrome. So it's harder to tell if it's disabled or not. Is there any more general way to make the disable textbox rendered more consistent on a top-level? So I don't need to change this for every page or every website? Please advise, thanks.
You could set a CSS style to handle disabled text controls to render them consistently. For example, something like the following:
input[type="text"][disabled] {
background-color: #ECECEC;
border: solid 1px #7F9DB9;
color: #CCCCCC;
}
For IE7 support (and possibly even IE8), a !DOCTYPE must be specified or CSS attribute selectors will not work. Unfortunately, if you require support for IE6 this will not work and you have to use a CSS class on any text input instead.
You can assign a CSS class to it using the CssClass property and control it as much as you want.
More on the CssClass property here.
Sample CSS:
.DisabledTextBox {
background-color: #C0C0C0;
border: solid 1px #A0A0A0;
color: #A0A0A0;
}
Then use the CssClass like this:
<asp:TexbBox id="DisabledTextBox" CssClass="DisabledTextBox" value="Some Value" />
Im trying to do a simple :focus effect for all my INPUT elements, like so:
INPUT:focus { border-color: orange; }
This works great, until I add this bit of CSS to the style sheet:
.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial;
font-size:14px;
padding:3px;
}
Now once I add the above, the focus effect doesnt work on any input within the form_container class, when I take the above out it works.
I can get the effect to work by specifying the class for the INPUT like so:
.form_container .col2 INPUT:focus { border-color: orange; }
But I dont understand why I have to do this? I want to control all INPUT effects like i do in the first example
if any one can shed some light on this
thx
That's because
.form_container .col2 INPUT
is more specific than
INPUT:focus
In CSS, more specific rules have higher priority, no matter what the order is in which they were declared. Rules that are equally specific (the same number of selectors usually), the rule declared later overrides or adds to rule declared first.
You could specify !important on your border style for the second rule, but it's not supported in all browsers (did I hear IE?)
In your first rule you're declaring the border color. In your second rule you're overriding it. You could try something like
INPUT:focus { border-color: orange!important; }