Styling Disabled Buttons / Disabled Text Boxes in CSS

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:

<input type="text" value="Text." disabled />

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”:

watch the wrestler in HD

<input type="text" value="Text." disabled="disabled" />

If possible, just for total compatibility, we can also add a “disabled” class that IE6 will respect and apply styles for correctly.

<input type="text" value="Text." disabled="disabled" class="disabled" />

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.

Bookmark It

Hide Sites

Akash Mehta in Web | 10 Comments » on Saturday, August 30th, 2008 at 6:08 am.
RSS 2.0 | Leave a response | Trackback