CODEWITHSUNDEEP
csscss-selectorssubmit-button
Francisc
Francisc

Reputation: 80505

CSS selector for disabled input type="submit"

Is there a CSS selector for disabled input type="submit" or "button"?

Should I just use input[type="submit"][disabled]?

Does that work in IE6?

Upvotes: 80

Views: 144496

Answers (4)

gil.fernandes
gil.fernandes

Reputation: 14641

This is in 2021. This is the css selector, which worked for me on Chrome and Edge (IE seems to be not supported any longer: https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/):

input[type=submit]:disabled {
    background-color: #4a4a4a;
}

Upvotes: 0

Meloman
Meloman

Reputation: 3722

I used @jensgram solution to hide a div that contains a disabled input. So I hide the entire parent of the input.

Here is the code :

div:has(>input[disabled=disabled]) {
    display: none;
}

Maybe it could help some of you.

Upvotes: 0

jensgram
jensgram

Reputation: 31518

Does that work in IE6?

No, IE6 does not support attribute selectors at all, cf. CSS Compatibility and Internet Explorer.

You might find How to workaround: IE6 does not support CSS “attribute” selectors worth the read.

EDIT
If you are to ignore IE6, you could do (CSS2.1):

input[type=submit][disabled=disabled],
button[disabled=disabled] {
    ...
}

CSS3 (IE9+):

input[type=submit]:disabled,
button:disabled {
    ...
}

You can substitute [disabled=disabled] (attribute value) with [disabled] (attribute presence).

Upvotes: 124

Tim
Tim

Reputation: 5943

As said by jensgram, IE6 does not support attribute selector. You could add a class="disabled" to select the disabled inputs so that this can work in IE6.

Upvotes: 2

Related Questions