web-dev-qa-db-fra.com

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

Je joue juste avec :before et :after.

Il semble que je ne puisse pas les utiliser sur/avec un bouton input? Je pensais que je pourrais éventuellement l’utiliser avec 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 bien sur une 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;   
}
csscss-selectors
14
user508605

J'ai également pensé que la même chose serait utile, mais hélas, la façon la plus simple de faire fonctionner les pseudo-éléments avant/après - de manière fiable est d'encapsuler l'entrée dans une balise SPAN et appliquer une classe à cela.

Cette discussion permet de comprendre pourquoi 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>
11
Tim Medora

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

En résumé, les intrants ne sont pas des conteneurs et ne peuvent pas avoir d'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 qu'au lieu d'utiliser <input type="submit|button">, vous pouvez utiliser <button> qui peut avoir des enfants, donc pour cette entrée, il existe une solution de contournement (enfin, si vous avez le contrôle sur le balisage;)

6
jinglesthula

Je viens de regarder dans la même chose - je voulais seulement l'utiliser pour afficher les clés d'accès:

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

Peu enclins à écrire la valeur de la clé d'accès à plus d'une place, ce qui ajoute généralement le risque de ne pas conserver les mêmes valeurs et serait beaucoup plus difficile UE-wise = 0 /

2
aliceraunsbaek

Cette réponse (le texte situé au-dessous de la ligne) ne fonctionne pas (de toute façon pour les inputs basées sur le texte), mais elle est laissée sur place inopinément, ce qui évite à une autre personne de se donner la peine d'essayer de réaliser la même résultat final par les mêmes moyens. La seule façon de procéder consiste, comme le note @Tim, dans sa réponse , à envelopper les éléments input (ou autres) dans un autre élément, tel que span, puis le style that avec le pseudo-élément :after.

JS Fiddle démonstration d’un exemple de travail .

Hum, ils semblent fonctionner assez bien JS Fiddle demo , sauf que, sans le position: absolute, le contenu de :after apparaît dans l'élément lui-même (à l'intérieur des boutons, 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;
}
1
David Thomas

J'avais besoin de faire cela avec des entrées, mais je n'avais pas accès pour changer le code HTML généré par Wordpress et Jquery. Eh bien, je pourrais peut-être, mais la solution aurait été longue. Même raison: accessibilité.

Donc, une solution possible que 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 tenir sur la même ligne et est heurté. Bien sûr, vous devez vous demander si vous pouvez prendre en charge les largeurs en pourcentage dans votre mise en page, mais vous avez l’idée.

0
Jennifer Michelle