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

Solution 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. :-/

Solution 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.

Solution 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/