Comment puis-je styliser des champs de saisie vides à l'aide de CSS ?

Style de champ de saisie vide en CSS

Interroger un champ de saisie en fonction de son état vide nécessite une approche spécifique en CSS. Bien que le sélecteur input[value=""] fourni ne fonctionne pas dans les navigateurs modernes, il existe une solution disponible.

Entrez :placeholder-shown. Cette pseudo-classe cible spécifiquement les champs de saisie vides, vous permettant d'appliquer des styles qui seront supprimés une fois que le champ de saisie contient une valeur. Par exemple :

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Il est important de noter que l'attribut placeholder doit être défini dans le HTML pour que le sélecteur :placeholder-shown fonctionne. De plus, Chrome nécessite qu'au moins un caractère espace soit présent comme valeur d'espace réservé.

Assurez-vous d'inclure l'attribut d'espace réservé avec un espace comme suit :

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

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!