Changement de la couleur des contrôles HTML désactivés dans IE8 avec CSS

Vous avez essayé d'utiliser CSS pour changer la couleur des contrôles de saisie désactivés, mais cela ne semble pas fonctionner dans IE8. Vous souhaitez comprendre pourquoi et trouver un moyen de remplacer le comportement par défaut.

Le CSS que vous avez utilisé :

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

Fonctionne bien dans la plupart des navigateurs, mais pas dans IE8. En effet, IE8 a un comportement spécifique pour les éléments désactivés, où il remplace la propriété color par une couleur grise par défaut, accompagnée d'une étrange ombre blanche.

La raison en est que les éléments désactivés dans IE8 sont considérés comme être des contrôles "inactifs", et le navigateur leur applique un style spécifique pour l'indiquer. Malheureusement, ce style inclut une couleur grise forcée pour le texte, qui remplace tout CSS que vous essayez d'appliquer.

La seule façon d'éviter ce comportement et de modifier la couleur des contrôles désactivés dans IE8 est d'utiliser une approche différente. . Une solution possible consiste à utiliser la pseudo-classe :disabled au lieu de l'attribut désactivé :

input:disabled {
  color: #666;
}

Cette pseudo-classe cible les éléments pour lesquels l'attribut désactivé est défini, mais elle ne définit pas réellement l'attribut désactivé lui-même. De ce fait, IE8 ne considère plus les contrôles comme « inactifs » et permet de remplacer les styles par défaut.