CODEWITHSUNDEEP
htmlcsscss-selectors
Francesca
Francesca

Reputation: 28138

Button type CSS and disabled button styling

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?

Upvotes: 0

Views: 13010

Answers (4)

Oriol
Oriol

Reputation: 288100

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.

Upvotes: 1

Anonymous
Anonymous

Reputation: 12017

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>

Upvotes: 3

Hashem Qolami
Hashem Qolami

Reputation: 99484

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+

Upvotes: 7

bprayudha
bprayudha

Reputation: 1034

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

Upvotes: 2

Related Questions