9

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?)

Emre Sevinç
  • 8,211
  • 14
  • 64
  • 105

3 Answers3

3

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 )

Marijn
  • 2,056
  • 2
  • 13
  • 11
  • According to http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html the css Emre is using is supported by IE 7 and above. – Richard Garside Jun 25 '10 at 10:28
  • It's important to note that IE7/8 will only work with attribute selectors if a DOCTYPE is defined correctly. So no quirks mode. – steventnorris Sep 14 '12 at 15:15
  • at least in my case, the problem is not the selector: I'm using a hand-assigned class on the disabled itself or the containing has any effect. The text of the options is gray. period. – molecular Apr 30 '15 at 06:17
  • IE11 does support the `:disabled` pseudo-class, but `color` is simply ignored. – Nick Apr 01 '17 at 15:14
2

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 ;)

cusspvz
  • 5,143
  • 7
  • 30
  • 45
  • I did it. I have removed the relevant CSS and ran it like your jQuery code above. What is really strange is that, when I look at the page the select's background is still white and the text inside is still gray but I use the Internet Explorer developer tools to see the style details of that select element and when I click on it IE developer tool's CSS pane tells me that: color: black and background-color: white. I'm truly perplexed! – Emre Sevinç Jun 25 '10 at 10:41
  • I played with different color names for "color" and "background-color", background color always changes, text's color always remains the same: gray. :( – Emre Sevinç Jun 25 '10 at 10:52
  • strange, do you have another js line controling the font and background color? – cusspvz Jun 25 '10 at 10:57
  • CuSS, no, as far as I can see. Here's the complete code of the function that runs when the SELECT element is manipulated: http://pastebin.com/S5qqLcH7 – Emre Sevinç Jun 25 '10 at 11:37
  • As you see I also tried to swap the order of .attr and .css, nothing changes for both cases. – Emre Sevinç Jun 25 '10 at 11:38
  • Please email me, to i clean this comment: jmoreira@microdual.com – cusspvz Jun 25 '10 at 19:25
-1

apply:

    background-image: url('');

to your css and it should work.

Giorgi
  • 609
  • 2
  • 15
  • 29