La pseudo-classe: la classe pseudo-placée est utilisée pour styliser la zone d'entrée lorsque le texte du placeur est visible, et il prend effet lorsque l'utilisateur n'entre pas de contenu. 1. Il convient aux scènes de formulaire qui nécessitent une rétroaction visuelle, comme la distinction des champs vides des champs remplis; 2. Il peut être utilisé pour ajuster les bordures, les couleurs d'arrière-plan ou contr?ler d'autres éléments pour afficher Hidden; 3. Il agit sur des éléments avec attribut d'attribut; 4. Les utilisations courantes incluent la mise en évidence des éléments requis, le changement de couleurs de bordure ou l'ajout d'animations de transition; 5. Faites attention à son incompatibilité et à ses différences par rapport à :: Planholder, qui est utilisé pour styliser directement le texte de l'espace réservé lui-même. </preny></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175216332579765.jpg" class="lazy" alt="à quoi sert: Pseudo-Class pour l'espace réservé?"></p> <p> La pseudo- <code>:placeholder-shown</code> dans CSS est utilisée pour styliser un élément d'entrée <strong>uniquement lorsque le texte d'espace réservé est actuellement visible</strong> . Cela signifie qu'il applique des styles lorsque l'utilisateur n'a pas encore saisi de valeur dans le champ de saisie.</p> <p> Ceci est super pratique si vous voulez modifier l'apparence d'une entrée lorsqu'elle est vide par rapport au contenu réel - comme l'ajustement des bordures, les couleurs d'arrière-plan ou même la cachette / affichant d'autres éléments en fonction de savoir si quelque chose a été tapé.</p> <hr> <h3> Quand utiliser <code>:placeholder-shown</code> </h3> <p> Vous atteignez généralement <code>:placeholder-shown</code> lors de la construction de formulaires où la rétroaction visuelle compte. Par exemple:</p> <ul> <li> Styliser les champs vides différemment pour guider les utilisateurs</li> <li> Rendre les espaces réservables en peaufinant la taille ou la couleur de la police</li> <li> Réglage du rembourrage ou de la disposition pour améliorer la convivialité</li> </ul> <p> Il fonctionne sur des éléments de formulaire comme <code><input></code> et <code><textarea></textarea></code> , mais tous les éléments ne prennent pas en charge les espaces réservés - seulement ceux qui acceptent l'entrée de texte et ont un attribut <code>placeholder</code> .</p> <p> Voici quelques scénarios courants:</p> <ul> <li> Mettre en évidence les champs requis uniquement lorsqu'ils sont vides</li> <li> Changer la couleur de la bordure pendant que l'espace réservé est affiché</li> <li> Ajout d'animations ou de transitions subtiles lorsque l'utilisateur commence à taper</li> </ul> <hr> <h3> Comment ?a marche dans la pratique</h3> <p> Disons que vous avez une entrée de texte de base comme ceci:</p><pre class='brush:php;toolbar:false;'> <input type = "text" placeholder = "Votre nom">

Si vous voulez le coiffer différemment lorsque l'espace réservé est visible, vous pouvez faire quelque chose comme:

 saisir {
  rembourrage: 10px;
  Border: 1px solide #ccc;
}

Entrée: Perferie
  Color à la frontière: # 999;
  Color d'arrière-plan: # f9f9f9;
}

Ainsi, tandis que l'espace réservé se manifeste, la bordure devient plus sombre et l'arrière-plan devient un peu plus léger. Une fois que quelqu'un tape quoi que ce soit, ce style ne s'applique plus.

Quelques notes rapides:

• Vous pouvez le combiner avec d'autres pseudo-classes comme :focus ou :invalid
• Le sélecteur ne s'applique pas une fois qu'un caractère (même un espace) est entré
• Il ne cible pas le texte d'espace réservé lui-même - juste le conteneur d'entrée

Pièges et conseils communs

Une chose à surveiller: les navigateurs traitent parfois le style d'espace réservé de manière incohérente. Par exemple, Safari peut rendre le texte d'espace réservé différemment de Chrome, sauf si vous le stylisez explicitement en utilisant ::placeholder .

Aussi, ne confondez pas :placeholder-shown avec ::placeholder . L'ancien cible l'élément d'entrée lorsque l'espace réservé est visible; Ce dernier vous permet de styliser directement le texte d'espace réservé.

Un autre astuce: utilisation :placeholder-shown pour les améliorations UX, comme afficher du texte ou des ic?nes d'assistance uniquement lorsque le champ est vide. Par exemple, vous pouvez masquer un bouton "Effacer" jusqu'à ce que l'entrée dispose de texte.

Et rappelez-vous - testez toujours à travers les navigateurs, surtout si vous comptez sur des indices visuels subtils.

Ce sont les bases de :placeholder-shown . Ce n'est pas compliqué, mais cela vous donne un bon moyen de rendre les formulaires plus réactifs et conviviaux 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!