Pourquoi ne ::après l'affichage du contenu pour les éléments d'entrée en HTML5 ?

Pseudo-éléments CSS pour les champs de saisie

En HTML5, l'ajout d'indices visuels aux entrées de formulaire à l'aide de pseudo-éléments CSS peut améliorer l'expérience utilisateur. On peut tenter d'utiliser les pseudo-éléments ::before et ::after pour le style, comme le montre l'exemple suivant :

<code class="css">input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }</code>

Cependant, on peut rencontrer des difficultés pour afficher le contenu ::after pour les éléments d'entrée. . Malgré l'utilisation de deux-points simples et doubles, la suppression des pseudo-classes et l'expérimentation avec différents navigateurs, le contenu reste invisible.

Alors que les pseudo-éléments ::after fonctionnent de manière transparente sur des éléments tels que div, span, p et q, ce n'est pas le cas pour les éléments d'entrée. Ce comportement découle d'un attribut fondamental de ces éléments : ils manquent de contenu dans l'arborescence des documents.

Le rôle du contenu des éléments

Selon la spécification CSS (http:// www.w3.org/TR/CSS21/generate.html), ::after les pseudo-éléments nécessitent explicitement des éléments avec un contenu d'arborescence de documents afin de restituer leur contenu. Les éléments d'entrée, similaires à img et br, ne contiennent pas un tel contenu. Par conséquent, de par leur conception, les navigateurs n'afficheront pas le contenu ::after pour les champs de saisie.

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!