Cambiar el color de los controles HTML deshabilitados en IE8 con CSS

Has intentado usar CSS para cambiar el color de los controles de entrada deshabilitados, pero no parece funcionar en IE8. Le gustaría entender por qué y encontrar una manera de anular el comportamiento predeterminado.

El CSS que ha utilizado:

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

Funciona bien en la mayoría de los navegadores, pero no en IE8. Esto se debe a que IE8 tiene un comportamiento específico para elementos deshabilitados, donde anula la propiedad de color con un color gris predeterminado, acompañado por una extraña sombra blanca.

La razón de esto es que se considera que los elementos deshabilitados en IE8 ser controles "inactivos" y el navegador les aplica un estilo específico para indicarlo. Desafortunadamente, este estilo incluye un color gris forzado para el texto, que anula cualquier CSS que intente aplicar.

La única forma de evitar este comportamiento y cambiar el color de los controles deshabilitados en IE8 es utilizar un enfoque diferente . Una posible solución es utilizar la pseudoclase :disabled en lugar del atributo deshabilitado:

input:disabled {
  color: #666;
}

Esta pseudoclase se dirige a elementos que tienen el atributo deshabilitado establecido, pero en realidad no establece el atributo deshabilitado en sí. Como resultado, IE8 ya no considera los controles como "inactivos" y le permite anular los estilos predeterminados.