Can I change the color of Disabled HTML Select Element in IE?

Question

I have a requirement of changing the color of a html select. I have search a lot but was not find a sample that works in IE. So, can I change the color of Disabled HTML Select Element in IE? I need a sample, in css or javascript or in jquery. Here is what I have tried.

<select disabled="disabled">
    <option value="a">option A</option>
    <option value="b">option B</option>
    <option value="c">option C</option>
</select>

[disabled] {
  color: #933;
  background-color: #ffc;
}


select:disabled
{
    border: solid 1px silver;
    background-color: #F9F9F9;
    color:blue;
}


[disabled] option {
    background-color: #ffc;  color: #933;
}

use another element to display instead of select( hide the select when disabled). `I need code` is not a question and you would need to provide code that changes select currently — charlietfl, Dec 22 '12 at 14:38
@charlietfl, it look like a good suggestion? I will try. Edited Question — Imran Qadir Baksh - Baloch, Dec 22 '12 at 14:40
What color do you want to change? Each of those selects is targeting different things. Also, what IE do you want this to work in? Just IE9+, or deeper support? — jamesplease, Dec 22 '12 at 14:57
[This](http://stackoverflow.com/a/602298/1113426) could be interesting for you. — Engineer, Dec 22 '12 at 15:02
@Engineer Link that only contains word 'this' is one of the worst possible. — Pavlo, Dec 22 '12 at 16:20
@PavloMykhalov You have your own opinion about 'that'.And that's fine, man! — Engineer, Dec 22 '12 at 17:05
@Engineer UX SE has [good question on the subject](http://ux.stackexchange.com/questions/12100/why-shouldnt-we-use-words-such-as-here-and-this-in-textlinks). — Pavlo, Dec 29 '12 at 10:59

score 4 · Answer 1 · answered Oct 25 '17 at 08:25

4

The solution is to use the ::-ms-value selector:

select[disabled]::-ms-value {
    color: red;
}

answered Oct 25 '17 at 08:25

Jon Grant

11,369
2
37
58

algorhythm · Answer 2 · 2015-04-30T06:28:12.447

1

try

[disabled="disabled"] {
    color: #933;
    background-color: #ffc;
}

or

*[disabled="disabled"] {
    color: #933;
    background-color: #ffc;
}

or

select[disabled="disabled"] {
    color: #933;
    background-color: #ffc;
}

or with jQuery

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('[disabled="disabled"]').css({ 'color': '#993333', 'background-color': '#ffffcc' });
    });
</script>

edited Apr 30 '15 at 06:28

answered Dec 22 '12 at 16:52

algorhythm

8,530
3
35
47

best way is to give your select box an id-attribute or class-name select it via css like this select.name {...} because selecting by using the attribute is a thing the IE is not able to do in earlier versions. – algorhythm Dec 23 '12 at 13:52
The problem is not the css selector. IE just can't use any color other than gray for disabled select options. – molecular Apr 30 '15 at 06:24

score 1 · Answer 3 · answered Apr 12 '18 at 23:11

In fact, none of the above/below answers worked for me, but this did:

# Select all disabled DOM objects
$(':disabled').css({
    color:'red'
});

# Select disabled DOM objects by HTML tag <input>
$('input:disabled').css({
    color:'red'
});

For more information: https://api.jquery.com/disabled-selector/

Can I change the color of Disabled HTML Select Element in IE?

3 Answers3