Comment puis-je styliser les champs de saisie selon qu'ils contiennent ou non du texte en utilisant uniquement du CSS ?

Identifier le texte dans les champs de saisie sans JavaScript

Dans le domaine du style CSS, détecter la présence de texte dans un élément de saisie peut être un tâche embarrassante. Cependant, la pseudo-classe insaisissable :empty et le sélecteur [value=""] ne parviennent pas à produire les résultats souhaités.

Néanmoins, la pseudo-classe :placeholder-shown apparaît comme une solution potentielle. Cette pseudo-classe cible les éléments d'entrée qui ont un attribut d'espace réservé sans afficher le texte de l'espace réservé.

Comment utiliser :placeholder-shown

1. Assurez-vous que votre entrée L'élément a un attribut d'espace réservé non vide. Même un seul espace est acceptable.
2. Utilisez le sélecteur :not(:placeholder-shown) pour styliser l'entrée lorsqu'elle contient du texte.
3. Utilisez le sélecteur :placeholder-shown pour styliser l'entrée. lorsqu'il est vide.

Par exemple :

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Ce code colorerait l'entrée en vert lorsqu'elle contient texte et rouge lorsqu'il est vide.

Mises en garde

Notez que cette technique repose sur l'utilisation d'attributs d'espace réservé. En tant que tel, il peut ne pas convenir aux scénarios dans lesquels le texte d'espace réservé n'est pas souhaité.

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!