Comment puis-je styliser des champs de saisie vides avec CSS à l'aide de « :placeholder-shown » ?

Styliser les champs de saisie vides avec CSS : un guide pratique

Styliser les champs de saisie vides pose un défi en CSS, car faire correspondre les valeurs vides avec le Le sélecteur common value="" peut être peu fiable. Pour lutter efficacement contre cette situation, nous étudions une solution innovante et efficace.

Dans les navigateurs modernes, la pseudo-classe :placeholder-shown vient à la rescousse. Contrairement à ::placeholder, qui cible le texte d'espace réservé, :placeholder-shown sélectionne spécifiquement les champs de saisie vides. Cela fournit un moyen précis d'appliquer des styles lorsque le champ est dépourvu de toute entrée utilisateur.

Pour illustrer cette approche élégante, considérons la règle CSS suivante :

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

Pour utiliser cette règle CSS en effet, il est crucial de se rappeler que le champ de saisie doit posséder un attribut d'espace réservé. De plus, dans les navigateurs Chrome, il est essentiel de garantir qu'un caractère espace est présent dans l'attribut d'espace réservé pour un bon fonctionnement. Cela garantit que la pseudo-classe :placeholder-shown est déclenchée comme prévu, même si le champ de saisie apparaît initialement vide à l'utilisateur.

Voici un exemple pour démontrer l'implémentation :

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

En conclusion, en exploitant la puissance de :placeholder-shown, nous obtenons la possibilité de styliser sans effort les champs de saisie vides en CSS. Cette pseudo-classe innovante élimine les limitations du sélecteur value="", permettant aux développeurs de créer facilement des formulaires conviviaux.

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!