As your forms grow in complexity, you’ll probably find a need to temporarily disable an input – either a button, a text box, or some other element. This is quite easy in HTML – the disabled attribute comes to the rescue. But just how do you style those fields, and convey that they are temporarily disabled?
Let’s consider this standard input field:
Pretty standard stuff. Your web browser will automatically style it a little, but mostly just prevent the user from editing without any real visual hints. But let’s add some basic CSS to convey the state of the input, and to standardise it across our site and on most platforms. If we add the following CSS:
input[disabled] {
border: 1px solid #999;
background-color: #ddd;
}
But wait – our demo uses inline styles, but your browser might not have just styled that properly if we used a full CSS declaration. We don’t set a value for the disabled attribute – it’s a minimized attribute. To get IE to play nicely with it (and for XHTML), we’ll have to set the value to “disabled”:
If possible, just for total compatibility, we can also add a “disabled” class that IE6 will respect and apply styles for correctly.
We can then change the CSS selector we’re using:
input[disabled="disabled"], input.disabled
And we’re done! This works across every major browser – IE6+ and FF1.0+ tested, and Safari 3 / Opera 9.5 should be fine as well. The Sitepoint CSS reference has further information on compatibility, available here.
Finally, if you want to see how Firefox styles disabled fields by default, load up your resource://gre/res/forms.css file (you’ll have to copy and paste it to your address bar). There are a number of lengthy selectors with just a few rules, but here’s the big one, way down the bottom:
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
}
GrayText is actually a system color – it’s defined by the CSS 2.1 specification and supported on and off in various browsers. These “special” color keywords are supposed to match the local system styles – on a Windows machine, for instance, Firefox would use the color: GrayText rule to style text in disabled fields with the same color that the local Windows system uses. A list of options is available on the CSS reference as well.
10 Responses to “Styling Disabled Buttons / Disabled Text Boxes in CSS”
August 30, 2008
Permana JayantaI’m beginner in CSS .. and i just know now that we even can style disable input text .. thank for the info ..
September 18, 2008
HeatherThis method does not work for radio & checkbox buttons. Do you know of a way we can manipulate styles for those elements (in both IE & FF)?
February 19, 2009
Bobby Web GuyGreat post, css is so powerful, thanks for the advanced tutorial.
March 17, 2009
SeanCan not work in IE, are u really try this before in IE browser?
April 13, 2009
StretchBest info out there on dealing with the differences in browsers. Thanks for sharing!
April 17, 2009
Yura zaripovFor using this in IE you can using jquery. Sample: $(“input[disabled]“).css(“color”,”grey”);
or javascript.
August 10, 2009
gamesIn my opinion css is great, thanks for the post.
September 29, 2009
PabloIt’s very interesting, but it’s not working for me on IE8.
It works very well on FF 3.5, but IE doesn’t apply the styles for textboxes (background color for example).
Anyone has a clue why this happens?
Thanks.
January 11, 2010
mickaelThank you for this very useful list, I am not sure it is cross browsers, but for my own website, I extended that to: input[type="text"][readonly], and hopefully it worked with Firefox 3.5.7
January 15, 2010
kjelltnx for the post! Was useful to me