Shawn asks the CSS Guy about styling disabled text inputs (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

Comments (13)

Webstandard-Team said:

Nice way to block an input field, thx

# May 11, 2007 3:27 AM

Adam said:

Another idea, a general script just through laziness to be honest but a good idea would be to call a javascript function to add the class to the field in IE where getAttribute("disabled") = "disabled"

Then you could include this script in all pages with a form et viola, no extra markup :)

# May 11, 2007 4:50 AM

Michael said:

I use disabled inputs extensively in my calculators collection. All input fields are styled so disabled fields go with the style too (like this rule of three calculator: http://calcme.com/calc/math01 ).

# July 21, 2007 7:18 AM

Ken said:

See http://www.webdeveloper.com/forum/showthread.php?t=43867

# November 7, 2007 6:31 PM

jayne said:

You can also add the different style elements to tags built using java.

# February 1, 2008 8:34 AM

john M said:

Very helpful site, but I required a solution to work in Explorer. Had to be black text, as forms were printed off and scanned.
Tried using .style to make textbox bold (worked but still too feint for scanner)

Solution? Forget the disable inputs and set readOnly = 'true'

works like a charm

# September 18, 2008 4:35 PM

Grayfoxxx said:

thanx to john M.. had the same issue.

# September 29, 2008 3:44 AM

Connor said:

I am using IE7 and the COLOR is still being ignored!

You example page (http://www.askthecssguy.com/examples/disabledinput/index.html) does not display the text inside the input as blue in IE7. It works in FF.

I have experimented with other attributes and they all work in IE7. Color just seems to be ignored? Do you get the same issue in your version of IE? Is this a known bug or do you know of a work around?

Thanks,
Connor

# November 18, 2008 9:50 AM

CSS Guy said:

@Connor,

Thanks for pointing that out. It shows that some browsers have less flexibility than others when it comes to styling form inputs. I've learned that's a good thing, and that it's a good rule of thumb for us designers not to leave form inputs alone.

# November 18, 2008 3:04 PM

nahiko said:

So, is it not possible to change the color attribute in IE 6, so that the text appears in any other color besides grey?

I would need it.

Thanks a lot in advance!!

# January 2, 2009 7:07 AM

jacek said:

thanks John M. readOnly does the trick

# February 18, 2009 7:17 PM

adwin said:

Hi,

nice tips

but sometimes people will type disabled without disabled='disabled'

so you must have 2 css to handle that

input[disable]{

}

# March 4, 2009 6:53 PM

Al said:

What if you only want the style to be applied to inputs with type=text and you don't want to set the class attribute?

# March 17, 2009 11:43 PM

Ask the CSS Guy