Button type CSS and disabled button styling

Question

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?

Francesca, [this post](http://stackoverflow.com/questions/20141450/should-i-use-css-disabled-pseudo-class-or-disabled-attribute-selector-or-is-i) may help to clarify the difference between `:disabled` pseudo-class and `[disabled]` attribute selector. — Hashem Qolami, Mar 16 '14 at 21:13

score 7 · Accepted Answer · answered Mar 16 '14 at 20:41

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.

Example Here.

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;
}

Example Here.

From the MDN:

The :disabled CSS 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+

score 3 · Answer 2 · answered Mar 16 '14 at 20:41

3

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>

answered Mar 16 '14 at 20:41

Anonymous

11,748
6
35
57

I tried this but weirdly it doesn't seem to be styling my buttons at all: http://francesca-designed.me/quiz/quiz.php – Francesca Mar 16 '14 at 20:45
2

You're not targeting your buttons. You're targeting inputs that have the type button. You would need to change your CSS to style buttons instead of inputs for it to work. Also, you should look at Hashem Qolami's answer for more clarification. – Anonymous Mar 16 '14 at 20:46

score 2 · Answer 3 · answered Mar 16 '14 at 20:41

2

input[type="button"]:disabled {}

answered Mar 16 '14 at 20:41

bprayudha

1,034
8
14

Oriol · Answer 4 · 2014-03-16T20:48:31.830

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.

Button type CSS and disabled button styling

4 Answers4