Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi les éléments d'entrée ne prennent-ils pas en charge les pseudo-éléments ::avant et ::après ?

Barbara Streisand
Libérer: 2024-10-24 18:12:14
original
676 Les gens l'ont consulté

Why Don't Input Elements Support ::before and ::after Pseudo-Elements?

Résoudre le puzzle : pourquoi les éléments d'entrée manquent ::avant et ::après les pseudo-éléments

Dans le but d'améliorer le style par défaut pour Éléments d'entrée HTML5, un problème courant survient lorsque les pseudo-éléments ::after ne parviennent pas à restituer le contenu. Malgré de nombreuses tentatives et tests sur différents navigateurs, les améliorations visuelles souhaitées restent insaisissables.

Ce comportement particulier a suscité la curiosité : pourquoi les navigateurs rejettent-ils à l'unanimité ::after les pseudo-éléments sur les éléments d'entrée ? Un examen approfondi de la spécification CSS révèle un détail crucial. Selon la spécification CSS21, ::after s'applique uniquement aux éléments possédant un contenu d'arborescence de documents. Les éléments d'entrée, ainsi que les éléments tels que les images et les sauts de ligne, ne contiennent pas un tel contenu, ce qui rend l'utilisation de ::after inefficace.

Par conséquent, la réponse réside dans la nature des éléments d'entrée. Contrairement aux éléments tels que les paragraphes ou les étendues contenant du contenu textuel, les éléments d'entrée facilitent principalement l'interaction de l'utilisateur et manquent de contenu à des fins d'affichage. Cette caractéristique inhérente empêche l'utilisation des pseudo-éléments ::before et ::after sur les éléments d'entrée.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal