Génération de contenu CSS avant ou après les éléments ‘input’

Dans Firefox 3 et Google Chrome 8.0, les éléments suivants fonctionnent comme prévu:

 span:before { content: 'span: '; }  Test  

Mais ce n’est pas le cas lorsque l’élément est :

  input:before { content: 'input: '; }    

Pourquoi ne fonctionne-t-il pas comme prévu?

Avec :before et :after spécifié le contenu à insérer avant (ou après) le contenu de cet élément. input éléments d’ input n’ont aucun contenu.

Par exemple, si vous écrivez Test (ce qui est faux), le navigateur corrigera cela et mettra le texte après l’élément d’entrée.

La seule chose que vous pouvez faire est d’envelopper chaque élément d’entrée dans un span ou un div et d’appliquer le CSS sur ces éléments.

Voir les exemples dans la spécification :

Par exemple, le fragment de document et la feuille de style suivants:

 

Header

h2 { display: run-in; }

Text

p:before { display: block; content: 'Some'; }

… serait exactement identique au fragment de document et à la feuille de style suivants:

 

Header

h2 { display: run-in; }

Some Text

span { display: block }

C’est la même raison pour laquelle il ne fonctionne pas pour les , etc. ( semble être spécial).

Cela n’est pas dû au fait que input balises d’ input n’ont pas de contenu en soi, mais que leur contenu est hors du champ d’application de CSS .

input éléments d’ input sont un type spécial appelé replaced elements , ceux-ci ne supportent pas :pseudo sélecteurs comme :before et :after .

En CSS, un élément remplacé est un élément dont la représentation est hors du domaine d’application de CSS . Ce sont des objects externes dont la représentation est indépendante du CSS. Les éléments remplacés typiques sont , , ou des éléments de formulaire tels que et . Certains éléments, tels que ou sont des éléments remplacés uniquement dans des cas spécifiques. Les objects insérés à l’aide des propriétés de contenu CSS sont des éléments remplacés anonymes.

Notez que cela est même mentionné dans la spécification :

Cette spécification ne définit pas entièrement l’interaction de :before et :after avec des éléments remplacés (tels que IMG en HTML).

Et plus explicitement :

Les éléments remplacés n’ont pas de pseudo-éléments ::before et ::after

Quelque chose comme ça fonctionne:

 input + label:after { content: 'click my input'; color: blue; } input:focus + label:after { content: 'not valid yet'; color: blue; } input:valid + label:after { content: 'looks good'; color: red; } 
   

fyi

prend en charge :before / :after aussi, peut être utile si vous enroulez votre élément avec …

Utilisez les balises label et notre méthode pour = est liée à la saisie . Si vous suivez les règles du formulaire et évitez toute confusion avec les tags, utilisez ce qui suit:

  

ou comparer (code court):

  

forme….

  

ou comparer (code court):