Can I style a disabled control using CSS or script?

Question

I have a HTML div element on a page that is updated when a select element on the page changes. Sometimes the input tags (text boxes) need to be disabled based on the selection.

Here is the problem: the project stakeholders like the functionality, they just think in the "disabled" state, the text box contents are too light and therefore unreadable. Can I apply CSS to a disabled control? Or should I be setting the text boxes to readonly and using some other CSS. This application is also using jQuery, if that helps. And ideas or suggestions here?

Answer 1

Applying CSS to an element is not affected by whether the element is disabled.

Answer 2

I would set them to readonly, as apparently you're wanting people to be able to read them, people may also want to select text from them for copy/paste, and selection is disabled as well when the text box is disabled. However, your CSS should work fine whether or not the element is disabled.

Answer 3

Yes, you can. In CSS:

input[disabled]{color:green}

Or jQuery:

$('input[disabled]').css('color','green');

UPDATE: This only works in gecko/webkit.

Answer 4

If you have trouble with a non-overwritable style in a disabled element - Upper Stage points out that there is no limit on styling, and on second thought he may be right - you may be best off with giving the controls a readonly attribute and "manually disabling" it using onfocus='this.blur();'

Note that this will not work 100% like a disabled control: Its value will be submitted with the form.

Answer 5

input[type="submit"][disabled="disabled"]
{
    /* CSS here */
}
input[type="text"][disabled="disabled"]
{
    /* CSS here */
}
input[type="button"][disabled="disabled"]
{
    /* CSS here */
}

Works in every browser if the input tag is something like:

<input type="submit" disabled="disabled">

and if you want to change it when it is not disabled, just add this to your CSS

input[type="submit"]
{
    /* CSS here */
}
input[type="text"]
{
    /* CSS here */
}
input[type="button"]
{
    /* CSS here */
}