How to get text in disabled option for changing color in IE9?

Question

In all major browsers except IE9, it colors the disabled option text for the red part of 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 change the color of the text, it retains gray color with the color disabled. How to change color disabled in IE9?

Answer 1

Something like that?

 select :disabled.red { color: red; } 

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

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

---

Update: This only seems to work in IE> 8. This answer points to a workaround for using the readonly attribute on form elements. This is not an option for an option tag.

There are JavaScript workarounds for older IEs. A simple google search led me to this site that provides a jQuery solution.

From the blog post :

Adding a bit of stylistic css magic, you get the same result in all other modern browsers.

Then you can enable or disable javascript usage. Many people have written code that makes an option look like it's disabled, waiting for a click on an option item, and then blurring it or focusing on the next / previously selected option to make it act as disabled.

I came up with the functions used with jQuery, to disable / enable select an option, transferring it to the optgroup and vice versa. It is tested in firefox 2 and 3, safari 3, i.e. 6 + 7, and works in Opera 9 (although opgroups jump to the bottom)

Answer 2

is it possible to use attribute selector in CSS?

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