Changing Color of Disabled HTML Controls in IE8 with CSS

You've tried using CSS to change the color of disabled input controls, but it doesn't seem to work in IE8. You'd like to understand why and find a way to override the default behavior.

The CSS you've used:

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

Works well in most browsers, but not in IE8. This is because IE8 has a specific behavior for disabled elements, where it overrides the color property with a default gray color, accompanied by a strange white shadow.

The reason for this is that disabled elements in IE8 are considered to be "inactive" controls, and the browser applies a specific style to them to indicate this. Unfortunately, this style includes a forced gray color for the text, which overrides any CSS you try to apply.

The only way to avoid this behavior and change the color of disabled controls in IE8 is to use a different approach. One possible solution is to use the :disabled pseudo-class instead of the disabled attribute:

input:disabled {
  color: #666;
}

This pseudo-class targets elements that have the disabled attribute set, but it doesn't actually set the disabled attribute itself. As a result, IE8 no longer considers the controls as "inactive" and allows you to override the default styles.