Comment CSS peut-il détecter la présence de texte dans les champs de saisie des sites Web externes ?

Détecter la présence de texte d'entrée à l'aide de CSS sur des pages incontrôlables

La détection de la présence de texte dans les champs de saisie est une tâche courante, mais les méthodes traditionnelles telles que :empty et [value=""] peut ne pas fonctionner efficacement dans tous les scénarios. Pour les situations où JavaScript est inaccessible, les styles CSS peuvent être exploités pour atteindre cet objectif.

Utilisation de la pseudo-classe placeholder-shown

Si l'élément d'entrée inclut un attribut d'espace réservé , la pseudo-classe :placeholder-shown entre en jeu. Cette pseudo-classe cible les champs de saisie où le texte d'espace réservé est visible, indiquant que le champ est vide.

Implémentation :

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

Exemple d'utilisation :

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

Avec cette approche, les deux premières entrées recevront les styles appliqués à :not(:placeholder-shown) car ils contiennent du texte ou ont une valeur d'espace réservé non vide. La troisième entrée, qui comporte un espace réservé mais pas de texte, recevra les styles appliqués à :placeholder-shown.

Cette méthode est particulièrement utile lorsque vous travaillez avec des thèmes et des styles appliqués à des pages tierces à l'aide d'extensions de navigateur telles que Élégant, car il permet une personnalisation basée sur la présence ou l'absence de texte dans les champs de saisie sans avoir besoin de JavaScript.

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!