How to change color of disabled html controls in IE8 using css

Question

I'm trying to change the color of input controls when they are disabled using the following css.

input[disabled='disabled']{
  color: #666;     
}

This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?

Answer 1

Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/

Answer 2

I had the same problem for <select> elements in IE10 and found a solution that works for select elements only:

http://jsbin.com/ujapog/7/

There is a Microsoft pseudo-element that allows the text color to be modified:

select[disabled='disabled']::-ms-value {
    color: #000;
}

The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx for other Internet Explorer only pseudo elements.

Edit: I think the rule should probably be select[disabled]::-ms-value but I don't have older IE versions in front of me to try it - re-edit this paragraph or add comment if that is an improvement.

Answer 3

There is no way to override styles for disable="disable" attribute. Here is my work around to fix this problem, note I am only selecting submit buttons in my case:

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

example available: http://jsfiddle.net/0dr3jyLp/