css - Styling disabled <select> (dropdown boxes) in HTML

Question

One of our customers has a hard time reading the grey text in disabled controls in our web-based application:

We would like to change the style to a light grey background and a black text. Unfortunately, most browsers (including IE, which is what the customer is using) ignore the color: ... CSS attribute on disabled controls, so we cannot change the foreground color.

For text boxes (input type="text"), this can easily be workarounded by using the readonly instead of the disabled attribute. Unfortunately, this is not an option for dropdowns (select) or checkboxes (input type="checkbox").

Is there an easy workaround for that? Preferebly one where the control does not need to be replaced by another type of control? (...since our controls are rendered by ASP.NET)

PS: Using the [disabled] selector in CSS does not make a difference.

Answer 1

In Internet Explorer 9, support will be added for the :disabled pseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.

In older versions of IE, you can adjust the background color (but not the color). Thus:

    <style type="text/css">
        select[disabled] { background-color: blue; }
    </style>

That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.