CSS : après pseudo élément sur le champ de saisie

Question

Je suis en train d'utiliser :after CSS pseudo élément sur le champ de SAISIE, mais il ne fonctionne pas. Si je l'utilise avec la DURÉE, cela fonctionne bien.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

Cela fonctionne (met le smiley après "buu!" et avant "un peu plus")

<span class="mystyle">buuu!</span>a some more

Cela ne fonctionne pas - il seulement la couleur someValue en rouge, mais il n'y a pas de smiley.

<input class="mystyle" type="text" value="someValue">

Ce que je fais mal? dois-je utiliser un autre pseudo-sélecteur?

Note: je ne peux pas ajouter SPAN autour de mon ENTRÉE; car il est généré par une tierce partie de contrôle.

Answer 1

:before et :after restituer à l'intérieur d'un conteneur

Pseudo-éléments ne peuvent être définis (ou mieux: ne sont pris en charge sur le récipient éléments. Parce que la façon dont ils sont rendus sont dans le conteneur lui-même en tant qu'enfant de l'élément. input ne peuvent pas contenir d'autres éléments, d'où ils ne sont pas pris en charge. Un button d'autre part c'est aussi un élément de formulaire soutient, car c'est un conteneur d'autres sous-éléments.

Si vous me demandez si certains navigateurs n' affichent ces deux éléments pseudo sur la non-conteneur des éléments c'est un bug et un non-conformité aux standards. Spécification communique directement sur le contenu d'un élément...

Spécification du W3C

Si nous lisez attentivement les spécifications qu'elle dit en réalité qu'ils sont insérés à l'intérieur d' un élément contenant:

Les auteurs de spécifier le style et l'emplacement, du contenu généré avec :before et :after pseudo-éléments. Comme leurs noms l'indiquent, l' :before et :after pseudo-éléments de spécifier l'emplacement du contenu avant et après un élément de l'arborescence du document contenu. La propriété 'content', en collaboration avec ces pseudo-éléments, spécifie ce qui est insérée.

Voir? un élément de l'arborescence du document contenu. Si je comprends bien, cela signifie l'intérieur d' un conteneur.

Answer 2

:after et :before ne sont pas pris en charge dans Internet Explorer 7 et moins, sur tous les éléments.

Il n'est pas destiné à être utilisé sur remplacer les éléments comme les éléments de formulaire (intrants) et les éléments de l'image.

En d'autres termes, il est impossible avec de la pure CSS.

Toutefois, si à l'aide de jquery , vous pouvez utiliser

$(".mystyle").after("add your smiley here");

Les docs de l'API .après

Pour ajouter votre contenu avec javascript. Cela fonctionne sur tous les navigateurs.

Answer 3

Bizarrement, cela fonctionne avec certains types d'entrée. Au moins dans Chrome,

 <input type="checkbox" />
 

fonctionne bien, même que

 <input type="radio" />
 

C'est juste type=text et d'autres qui ne fonctionnent pas.

Answer 4

J'ai utilisé le background-image pour créer le point rouge pour les champs obligatoires.

 input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%), radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}
 

Voir sur Codepen

Answer 5

J’ai trouvé ce post car j’ai eu le même problème, c’est la solution qui a fonctionné pour moi. Plutôt que de remplacer la valeur de l’entrée il suffit de le retirer et absolument placer une travée derrière elle qui a la même taille, la durée peut avoir un `` Pseudo-classe appliqué avec la police de l’icône de votre choix.