Styling disabled <select> (dropdown boxes) in HTML - 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.

Answer 2

This worked for me in webkit and Firefox
select:disabled{
opacity: 0.6;
}

Answer 3

For those still finding this.
Not working:
select[disabled] { background-color: blue; }
Working:
select option [disabled] { background-color: blue; } will do

Answer 4

This worked for me
select[disabled='disabled']::-ms-value {
color: red;
}

Answer 5

Sorry for my english...
That's not possible using css just, IE doesn't allow change properties of a disabled select tag

Answer 6

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>

Answer 7

I know this is question is old but this code worked well for me.
It allowed for full control of text and background color. I used this code with a disabled select control whose value is set based on a value from another select. I didn't want to see the grayed background, especially when the value had not yet been set.
CSS
<style>
.whatever-control:disabled, .whatever-control[readonly] {
background-color: white;
opacity: 1;
color: blue;
font-weight: bold;
}
</style>
Form
<select id = "SelectState" name="SelectState" class="whatever-control" disabled="disabled">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL" selected="selected">Florida</option>
<option value="GA">Georgia</option>
</select>

Answer 8

You can try,
option:disabled{
opacity: 0.6;background-color: #ff888f;
}
<select id="HouseCleaningEmp" onChange="myCalculater()">
<option value="1">option 1 </option>
<option value="2">option 2 </option>
<option value="3">option 3 </option>
<option value="4">option 4 </option>
<option value="5" disabled>option 5 </option>
<option value="6" disabled>option 6 </option>
<option value="7">option 7 </option>
<option value="8">option 8 </option>
</select>