How to change color of disabled html controls in I

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

It is the solution that I found for this problem:

//if IE

inputElement.writeAttribute("unselectable", "on");

//Other browsers

inputElement.writeAttribute("disabled", "disabled");

By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.

Answer 2

The way I solved the problem of "disabling" a control in IE w/o the ugly gray with a input control of type = checkbox was to leave it enabled and use a little javascript in the onclick event to prevent changes:

onclick='this.checked == true ? this.checked = false : this.checked = true;'

Answer 3

I Know it's been a while since the creation of this topic, but i created this workaround, and well... It worked for me! ( Using IE 9 )

The only consequence is that you can't select the value of the input.

Using Javascript:

    if (input.addEventListener)
            input.addEventListener('focus', function(){input.blur()}, true)
    if (input.attachEvent)
            input.attachEvent("onfocus", function(){input.blur()})

Answer 4

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 5

The problem is solved in IE11. If the problem still persists in IE11, check for the rendering engine IE is using.