CODEWITHSUNDEEP
cssformsinputcss-selectors
Chris
Chris

Reputation: 27394

Style disabled form control with class

I have an input button with a style, I want to alter the style if it is disabled. This works when disabled is set like so disabled="disabled" but if disabled is set simply by writing disabled it doesn't work with the class specifier as well, am I constructing the CSS wrong?

So to clarify input[disabled="disabled"].awesome works properly, input.awesome.disabled does not.

I am testing with the following HTML:

<input class="awesome" disabled />
<input class="awesome" disabled="disabled" />

CSS:

input[disabled="disabled"].awesome , input.awesome.disabled
{
    color: #aaa;;
    background-color: #eee;
}

If I write the selector like so, it works (but for all buttons)

input[disabled="disabled"], input.disabled { /**/ }

Upvotes: 1

Views: 5771

Answers (1)

Nate B
Nate B

Reputation: 6344

Disabled is not a class (which is what your CSS implies), it's a pseudoclass. Use this:

input.awesome:disabled

Upvotes: 6

Related Questions