This is an example of my buttons:
<button id="question_1a" disabled">Next question</button>
I want to have styling for buttons as standard, then a different background-color if they are disabled:
input[type=button][disabled]{
background-color:#CCC;
}
input[type=button]{
background-color: #6CB300;
color:#fff;
border:0;
font-size:1.5em;
padding:2% 3%;
}
This doesn't seem to be correct, how do I select disabled buttons and normal buttons?
First of all, you should remove the extra quote " at the end of the <button> opening tag:
<button id="question_1a" disabled">Next question</button>
<!-- Here --^ -->
Second, Since you are using <button> element you should use button[disabled] selector in order to select the disabled button.
button[disabled] {
background-color:#CCC;
}
However there is a pseudo-class called :disabled which represents any disabled element. You could use button:disabled selector to achieve the same result:
button:disabled {
background-color:#CCC;
}
From the MDN:
The
:disabledCSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.
It's worth noting that :disabled pseudo-class is supported in IE9+
You would select them like this:
input[type=button]:disabled{
background-color:#CCC;
}
input[type=button]{
background-color: #6CB300;
color:#fff;
border:0;
font-size:1.5em;
padding:2% 3%;
}
Also, your HTML has an extra quotation mark. It should be:
<button id="question_1a" disabled>Next question</button>
input[type="button"]:disabled {}
In your html you have a <button> element, but in your selector you match <input>.
Then, change your html to [Demo]
<input type="button" id="question_1a" disabled="disabled" value="Next question" />
or change your css to [Demo]
button{ /* ... */ }
button[disabled]{ /* ... */ }
Anyway, note that if you use <button> elements you should set type="button" to them too, in order to avoid buggy behavior in some browsers.
And you could use :disabled pseudo class instead of the attribute selector.
:disabledpseudo-class and[disabled]attribute selector.