Style des champs d'entrée vides avec css

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

Dans les navigateurs modernes, le: pseudo-classe réduit de placement fournit un moyen plus fiable de styliser les champs d'entrée vides. Cet pseudo-classe cible les champs d'entrée où le texte du placement est actuellement visible, indiquant que le champ de saisie est vide.

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

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 dans HTML:

En utilisant: Planholder, vous pouvez créer un style personnalisé qui cible les champs d'entrée vides et fournit des commentaires améliorés de l'utilisateur.