CSS3: après pseudo-élément avec entrée

Question

Il suffit de jouer avec :before et :after.

Il semble que je ne peux pas les utiliser sur/avec un bouton input? Je pensais que je pourrais potentiellement l'utiliser afficher un astérisque pour les champs obligatoires. Pas nécessairement ce que je vais faire, juste une option

input { 
    position: relative; 
} 
input:after { 
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px; 
} 

Même code fonctionne très bien sur un li

li { 
    clear: both; 
    margin: 0 0 10px; 
    position: relative; 
} 
li:after { 
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px; 
} 

Answer 1

J'ai aussi pensé que la même chose serait utile, mais hélas, la façon la plus simple J'ai été capable de faire fonctionner les pseudo-éléments avant/après de façon fiable en enveloppant l'entrée dans une balise SPAN et en appliquant une classe à cela.

Cette discussion fournit un aperçu des raisons pour lesquelles input:after ne fonctionne pas: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

Vous pouvez faire quelque chose comme:

.required:after { 
    content: "REQUIRED"; 
    color: orange; 
    margin-left: 1em; /* space between the input element and the text */ 
    padding: .1em; 
    background-color: #fff; 
    font-size: .8em; 
    border: .1em solid orange; 
} 

<span class="required"><input id="foo" /></span> 

Answer 2

Cette réponse (le texte ci-dessous la ligne) ne le fait pas travailler (pour input de texte de toute façon), mais il est laissé in situ sur le hasard, il sauve quelqu'un d'autre la peine d'essayer d'atteindre le même résultat final par les mêmes moyens. La seule façon de le faire est, comme @Tim notes, in his answer, pour envelopper les input (ou autres) éléments dans un autre élément, comme un span, puis le style qui avec le pseudo-élément :after.

JS Fiddle demo of a working example.

---

Um, ils semblent travailler tout à fait correct JS Fiddle demo, sauf que, sans position: absolute le contenu :after apparaît dans l'élément lui-même (à l'intérieur des boutons ou des cases à cocher, etc.).

html:

<button class="req">button</button> 
<input class="req" type="text" /> 
<input class="req" type="radio" /> 
<input class="req" type="checkbox" /> 
<textarea class="req"></textarea> 

css:

input, 
textarea { 
    display: block; 
} 
.req { 
    position: relative; 
} 

.req:after { 
    content: "*"; 
    margin: 0 0 0 0.5em; 
    position: absolute; 
    top: 0; 
    right: -1em; 
} 

Answer 3

Je viens de regarder dans la même chose - que je voulais l'utiliser pour afficher accesskeys:

*[accesskey]:after { 
    content:' [' attr(accesskey) ']'; 
} 

Pas si vif en ayant à écrire la valeur accesskey plus d'une place cause qui ajoute généralement le risque de ne pas garder les mêmes valeurs et ce serait tutile UE-sage = 0/

Answer 4

J'avais besoin de faire ceci avec des entrées, mais n'ai pas eu l'accès pour changer le html, qui a été produit par Wordpress et Jquery. Bien, peut-être que je pourrais mais cela aurait été une longue solution de contournement. Même raison: l'accessibilité.

Ainsi, on fixe possible, vous pouvez utiliser:

#comment-form input[type=text], 
#comment-form input[type=email], 
#comment-form input[type=url], 
#comment-form input[type=password] { 
width:40%; margin-right:60%; } 

Si le message d'erreur vient après, il ne peut plus en forme sur la même ligne & sera décalé. Bien sûr, vous devez vous demander si vous pouvez supporter des largeurs en pourcentage dans votre mise en page, mais vous avez l'idée.

Answer 5

Une question essentiellement identique a été posée ici qui a une bonne explication: https://stackoverflow.com/a/4660434/749227

Pour résumer, les entrées ne sont pas des conteneurs et ne peuvent pas avoir des enfants. Le contenu inséré par les pseudo-éléments: before et: after ne peut donc normalement pas être inséré dans les entrées.

Notez que plutôt que d'utiliser <input type="submit|button"> vous pouvez utiliser <button> qui peut avoir des enfants, donc pour cette entrée, il y a une « solution » (bien, si vous avez le contrôle sur le balisage;)