Maison >interface Web >tutoriel CSS >Comment personnaliser la couleur du texte de la zone de texte désactivée dans IE6/IE7 ?

Comment personnaliser la couleur du texte de la zone de texte désactivée dans IE6/IE7 ?

DDD
DDDoriginal
2024-10-28 03:43:02931parcourir

How to Customize Disabled Textbox Text Color in IE6/IE7?

Personnalisation de la couleur du texte des zones de texte désactivées dans IE

Introduction :

Changer la couleur du texte des zones de texte désactivées est une exigence courante dans le développement web. Bien que cette tâche soit simple dans les navigateurs modernes comme Firefox, elle présente un défi dans les versions 6 et 7 d'Internet Explorer (IE).

Défi :

Lors de l'application d'un CSS classe aux zones de texte désactivées dans IE6/IE7, la couleur du texte ne change pas comme prévu. Contrairement à Firefox, qui permet la personnalisation de la couleur du texte, IE affiche le texte de la zone de texte désactivée dans une teinte de gris fixe.

Solution :

Pour réaliser la personnalisation de la couleur du texte dans les zones de texte désactivées dans IE6 /IE7, utilisez la technique suivante :

1. Utilisez l'attribut « lecture seule » :

Au lieu d'utiliser l'attribut « désactivé », utilisez l'attribut « lecture seule ». Contrairement à « désactivé », qui affiche la zone de texte sous la forme d'un widget au niveau du système d'exploitation, « lecture seule » permet une personnalisation davantage basée sur CSS.

2. Appliquer un style personnalisé :

Créez une classe CSS qui cible spécifiquement les zones de texte « en lecture seule » et applique la couleur de texte souhaitée à l'aide de la propriété « couleur ». Par exemple :

<code class="css">textarea[readonly] {
  color: red;
}</code>

Explication :

En utilisant « lecture seule » au lieu de « désactivé », vous donnez aux navigateurs plus de liberté pour appliquer le style CSS. Cette solution de contournement vous permet de remplacer l'apparence de l'état désactivé par défaut et de personnaliser la couleur du texte selon vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn