how to get text in disabled option to change color in IE9?

Question

In all major browsers except IE9, it colors a disabled option's text to red this code:

<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>

...
//CSS
.red{
color:red;
}

But in IE, it does not changed text color, it keeps it a grey disabled color. How can I get the disabled color to change in IE9?

i have found out it can't be done by just css, need a workaround in javascript for IE9 as well — user1723760, Feb 05 '13 at 00:52

Chris Barr · Answer 1 · 2013-02-03T05:29:16.637

0

perhaps use the attribute selector in CSS?

option:disabled,
option[disabled] {
    color: red;
}

edited Feb 03 '13 at 05:29

answered Feb 03 '13 at 03:34

Chris Barr

29,851
23
95
135

I don't want all disabled options to be red so I will try your code but replace option with .red – user1723760 Feb 03 '13 at 03:35
Ok then, code updated. But the part I was trying to point out is still the same. use `[disabled]` instead of `:disabled` – Chris Barr Feb 03 '13 at 03:37
The .red[disabled] and the option[disabled] both did not work – user1723760 Feb 03 '13 at 03:39
@ChrisBarr I actually tried using the [disabled] rule, and for some reason the only way of selecting a disabled option using IE is via the :disabled pseudo-class. – thordarson Feb 03 '13 at 03:39
Really? That's odd. I guess it might be worth using both in the same rule as a catch-all in that case. Updating answer again. – Chris Barr Feb 03 '13 at 05:28

score -2 · Accepted Answer · edited May 23 '17 at 12:23

Something like this?

select :disabled.red {
    color: red;
}

Here's a document about the :disabled pseudo-class from Microsoft.

Here's a fiddle that should work in IE9 and up.

Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.

There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.

From the blog:

By adding a little css styling magic and you end up with an identical outcome in all other modern browsers.

You can then enable and disable using javascript. Many people have written code which makes an option look like it’s disabled, waits for a click on the option element and then bluring it or focusing the next / previously selected option to make it act like it’s disabled.

I have come up with functions used with jQuery to disable / enable a select option by converting it to an optgroup and back. It is tested in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9 (although the opgroups jump to the bottom)

I tried `.red:disabled{color:red;}`, but did not work, reason I can't use `option:disabled { color: red; }` is because I don't want all disabled options to be red — user1723760, Feb 03 '13 at 03:31
@user1723760 I've updated the code to only color .red options — thordarson, Feb 03 '13 at 03:37
I tried you updated code but still no color change. Even in the fiddle it shows no change in color. — user1723760, Feb 03 '13 at 03:45

how to get text in disabled option to change color in IE9?

2 Answers2