CSS selector for disabled input type="submit"

Question

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?

Dragoon

:disabled may be better, in CSS3. However IE doesn't support either so you'll need a backup class. – Schlock

Thanks, good point, but I plan on staying away from CSS3 for now. – Dragoon

Developers really need to stop trying to support IE6. And site owners / managers really need to stop asking developers to support it. Come on people -- IE9 is coming out now! – Boroughenglish

Well, considering 24% of the users of my client come from IE6, I cannot ignore it for now sadly. IE9 is great, but it doesn't work on Windows XP for example. – Dragoon

24% is above average for IE6 these days, but yes if you have that kind of stat you need to cope with. Doesn't mean you have to make everything look perfect in it though, as long as the functionality works. For what it's worth, we're seeing about 17%, and we've made a decision to actively drop support for it in our upcoming site revamp. – Boroughenglish

Answer 1

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).

Impact

Ok, thank you. But if I was to ignore IE6, how would that be accomplished? Would input[type="button"[disabled] be standard? – Dragoon

Thanks again for the first link, CSS Compatibility and Internet Explorer - EXCELLENT ARTICLE, instant bookmark. – Dragoon

@SuperUberDuper The attribute-based approach will work in IE8 (which is neither IE6 nor IE9+). Both IE7 and IE8 supports some CSS2.1 and CSS3 selectors, attribute value / presence being one of those. – Impact

Answer 2

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.

Mcelroy

Answer 3

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.

Zoophilia

Answer 4

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

Hangman