Ask the CSS Guy

Shawn asks the CSS Guy about styling disabled text inputs

Shawn writes:

This problem probably doesn't come up very often, but I was wondering if you knew of a collection of 'disabled text box' styles.

I'm going to assume you mean input fields of type="text", as opposed to textareas. I never think about disabled text inputs as I rarely use them. For those who want clarification, a disabled text input usually has a grayed-out look, and the value is not able to be modified by user input. It's has the disabled attribute, like so:

<input
  type="text"
  value="you cant edit this"
  disabled="disabled" />

And here's an image of what it would look like, right under a enabled text input for comparison, as rendered in Firefox:

As for styling it...

You can style a disabled text input as much as you could any other text input. It can be targeted with the following selector:

input[disabled='disabled'] {
  ... styles go here ...
}

Which means "Take all the <input> tags with the attribute of disabled set to "disabled", and apply the following styles...

IE6 doesn't understand that, so if it's really important to you to show something other than a grayed-out text box to IE6 users, consider adding a class to your input as well, like so:

<input
  type="text"
  value="you cant edit this"
  disabled="disabled"
  class="disabled" />

So now it comes down to which styles would you apply? We don't have same styles at our disposal that could be applied to regular text boxes, as IE doesn't pick up on a text-color assignments for disabled text boxes, Safari ignores border designations for all text boxes. Here is an example of giving a background color, new text color, and probably the only thing I could think of that might be useful, a cursor style that doesn't give an indication that there is editable text.

input[disabled='disabled'] {
  background:yellow;
  color:blue;
  cursor:default;
}

Here's what that looks like.

Fugly.

If anyone else has attempted to style disabled inputs, let us know what you did, and why you chose to do something different than the default browser presentation.

Also see: Styling disabled form controls with CSS.

# May 10, 2007 5:07 PM