How can I change the font color of a disabled SELECT element? (Works in Firefox but not in IE)

Question

How can I change the font color of a disabled SELECT element in IE? No matter what I tried it stays gray. I was able to change the background from gray to white but the text inside the disabled SELECT stays the same. What works perfectly for Firefox has no effect in terms of font color in IE (in this case IE8). You can see the latest situation for both browsers here:

http://www.flickr.com/photos/64416865@N00/4732813702/

I use jQuery to disable the select element:

$(selectObject).attr('disabled', 'disabled');

and here is the CSS class that I use for disabled selects:

select[disabled] {
    color: black;
    background-color: white;
    border-style: solid;
}

I find it very strange that I could easily change the default background color of disabled selects but not the default font color. Any tips or ideas about this? (Or is this completely impossible in IE by using CSS?)

Answer 1

i never heard of font-color and foreground-color in css before... maybe the IE is confused about that (so do i) and simply goes on strike... (i don't have an IE to test that, please try to remove that lines)

Answer 2

It might be impossible to do in current IEs. Browsers to come will probably support a :disabled pseudo-class (see http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html )

Answer 3

EDIT: You have to supply support for the most browsers, and only 50% of the browsers supports that type of pseudoclasses, so, if i was you, i would do this:

$(selectObject)
    .attr('disabled', 'disabled')
    .css({
        "color":"black",
        "background-color":"white",
        "border-style":"solid"
    });

hope it works ;)