CSS contenu génération avant ' d’entrée ' éléments

Question

Dans Firefox 3 et Google Chrome 8.0, ce qui suit fonctionne comme prévu :

Mais il ne fonctionne pas lorsque l’élément est `` :

Pourquoi est-ce ne pas travailler comme je m’y attendais ?

Answer 1

Avec :before et :after vous spécifiez dont le contenu doit être inséré avant (ou après) le contenu de cet élément. input n'ont pas de contenu.

E. g. si vous écrivez <input type="text">Test</input> (ce qui est faux), le navigateur va corriger cela et de mettre le texte après l'élément d'entrée.

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

Voir les exemples dans la spécification:

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

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...rendrait exactement de la même manière que le document suivant fragment et de la feuille de style:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

C'est la même raison pourquoi il ne fonctionne pas pour <br>, <img>, etc. (<textarea> semble être spécial).

Answer 2

Quelque chose comme cela fonctionne :

Ajoutez ensuite quelques flotteurs ou positionnement aux choses de l’ordre. Voici un JSBin :

http://jsbin.com/roxem/2/Edit

Answer 3

pour info prend en charge les / ainsi, peut être utile si vous enveloppez votre élément avec elle... (eu moi-même un problème de conception avec ça aussi)

Answer 4

Utilisation balises label et notre méthode pour =, est lié à l’entrée. Si suivre les règles de la forme et éviter toute confusion avec des étiquettes, utilisez la syntaxe suivante :

ou comparer (numéro abrégé) :

forme...

ou comparer (numéro abrégé) :