80

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?

5
  • 4
    :disabled may be better, in CSS3. However IE doesn't support either so you'll need a backup class.
    – bobince
    Sep 21, 2010 at 11:18
  • Thanks, good point, but I plan on staying away from CSS3 for now.
    – Francisc
    Sep 21, 2010 at 11:31
  • 14
    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!
    – Spudley
    Sep 21, 2010 at 11:38
  • 1
    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.
    – Francisc
    Sep 21, 2010 at 11:50
  • 2
    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.
    – Spudley
    Sep 21, 2010 at 12:02

4 Answers 4

124

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

3
  • Ok, thank you. But if I was to ignore IE6, how would that be accomplished? Would input[type="button"[disabled] be standard?
    – Francisc
    Sep 21, 2010 at 11:27
  • Thanks again for the first link, CSS Compatibility and Internet Explorer - EXCELLENT ARTICLE, instant bookmark.
    – Francisc
    Sep 21, 2010 at 11:31
  • 1
    @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.
    – jensgram
    Oct 5, 2015 at 4:51
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.

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.