26

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.

3
  • possible duplicate: stackoverflow.com/questions/679358/…
    – Peter
    Commented Sep 30, 2010 at 10:50
  • @Peter: The answer given to question 679358 does not apply: It's not a problem of the [disabled] selector not working. It's a problem of IE (including 8, 9) not allowing to override the text color of disabled controls.
    – Heinzi
    Commented Sep 30, 2010 at 10:55
  • 8
    Ask the customer to turn the brightness of his monitor down.
    – Kyle
    Commented Sep 30, 2010 at 11:17

8 Answers 8

37

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.

2
  • 3
    IE9 doesn't support the "color" property when disabled. Text is still that ugly grey with white shadow.
    – Craigo
    Commented Sep 29, 2012 at 4:43
  • Selected options are also not supported in IE or Chrome Commented Nov 2, 2012 at 16:28
9

This worked for me in webkit and Firefox

select:disabled{
   opacity: 0.6;
}
2

For those still finding this.

Not working:

select[disabled] { background-color: blue; }

Working:

select option [disabled] { background-color: blue; } will do
2
  • 1
    Both not working for me but this worked out option:disabled
    – Janath
    Commented Feb 28, 2021 at 4:29
  • Neither of these work for me in Chrome or Firefox.
    – cazort
    Commented Nov 1, 2021 at 19:04
2

This worked for me

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

Sorry for my english...

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

1

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>
0

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>

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.