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?

Answer 1

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)