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

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

• javascript
• jquery
• html
• css

• 1 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 Commented Dec 22, 2012 at 14:38
• @charlietfl, it look like a good suggestion? I will try. Edited Question – Imran Qadir Baksh - Baloch Commented Dec 22, 2012 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 Commented Dec 22, 2012 at 14:57
• This could be interesting for you. – Engineer Commented Dec 22, 2012 at 15:02
• @Engineer Link that only contains word 'this' is one of the worst possible. – Pavlo Commented Dec 22, 2012 at 16:20

3 Answers 3

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

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

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>

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./disabled-selector/