Styling disabled <select> (dropdown boxes) in HTML

user_87698 0
Viewed 97823

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

IE9 example

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.

accessibility css html
6 Answers

This worked for me

select[disabled='disabled']::-ms-value {
    color: red;
   }
user_21954530

You can try the following:

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #555;
        }
    </style>
user_26806400
Related