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