Comment puis-je styliser de manière fiable des champs de saisie vides avec CSS ?

Style des champs de saisie vides avec CSS

Un besoin de style courant consiste à appliquer des règles spécifiques aux champs de saisie vides. Cela peut être utile pour fournir des repères visuels aux utilisateurs, tels qu'un texte d'espace réservé ou une bordure colorée. Cependant, l'utilisation du sélecteur input[value=""] pour cibler les entrées vides peut ne pas fonctionner comme prévu.

Dans les navigateurs modernes, la pseudo-classe :placeholder-shown fournit un moyen plus fiable de styliser les champs de saisie vides. . Cette pseudo-classe cible les champs de saisie où le texte d'espace réservé est actuellement visible, indiquant que le champ de saisie est vide.

Pour appliquer une bordure rouge à un champ de saisie vide, vous pouvez utiliser le CSS suivant :

input:placeholder-shown {
  border: 1px solid red;
}

Notez que vous devez également définir un attribut d'espace réservé sur le champ de saisie en HTML :

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Chrome nécessite au moins un caractère d'espace comme valeur d'espace réservé pour déclencher la pseudo-classe :placeholder-shown. Cela garantit que le champ de saisie n'est techniquement pas vide tout en autorisant la saisie de l'utilisateur.

En utilisant :placeholder-shown, vous pouvez créer un style personnalisé qui cible les champs de saisie vides et fournit des commentaires améliorés de l'utilisateur.

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!