Puis-je utiliser un pseudo-élément: before ou: after sur un champ de saisie?

:after et :before ne sont pas pris en charge dans Internet Explorer 7 et versions ultérieures, sur aucun élément.

Il n’est pas non plus destiné à être utilisé sur des éléments remplacés tels que des éléments de formulaire (entrées) et des éléments d’image .

En d’autres termes, c’est impossible avec du CSS pur.

Cependant, si vous utilisez jquery, vous pouvez utiliser

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

Documents API sur .after

Pour append votre contenu avec JavaScript. Cela fonctionnera sur tous les navigateurs.

:before et :after rendu à l’intérieur d’un conteneur

et ne peuvent pas contenir d’autres éléments.

Les pseudo-éléments ne peuvent être définis (ou mieux dit, que supportés) sur des éléments de conteneur. Parce que la façon dont ils sont rendus se trouve dans le conteneur lui-même en tant qu’élément enfant. input ne peut pas contenir d’autres éléments et n’est donc pas supporté. Un button d’autre part qui est aussi un élément de formulaire les supporte, car il s’agit d’un conteneur d’autres sous-éléments.

Si vous me demandez si certains navigateurs affichent ces deux pseudo-éléments sur des éléments autres que des conteneurs, il s’agit d’un bogue et d’une conformité non standard. La spécification parle directement du contenu de l’élément …

Spécification W3C

Si nous lisons attentivement la spécification, elle indique qu’elle est insérée dans un élément contenant:

Les auteurs spécifient le style et l’emplacement du contenu généré avec les pseudo-éléments: before et: after. Comme leurs noms l’indiquent, les pseudo-éléments: before et: after spécifient l’emplacement du contenu avant et après le contenu de l’arbre de document d’un élément. La propriété ‘content’, conjointement avec ces pseudo-éléments, spécifie ce qui est inséré.

Voir? le contenu de l’ arbre de document d’un élément . Si je comprends bien cela signifie dans un conteneur.

Curieusement, cela fonctionne avec certains types d’intrants. Au moins dans Chrome,

fonctionne bien, même que

Il suffit de type=text et d’autres qui ne fonctionnent pas.

Voici une autre approche (en supposant que vous ayez le contrôle du code HTML): ajoutez un vide juste après l’entrée, et ciblez-le dans CSS en utilisant input.mystyle + span:after

 .field_with_errors { display: inline; color: red; } .field_with_errors input+span:after { content: "*" } 

 
Label:
 
   

:before et :after sont appliqués à l’intérieur d’un conteneur, ce qui signifie que vous pouvez l’utiliser pour des éléments avec une balise de fin.

Cela ne s’applique pas aux éléments à fermeture automatique.

Par ailleurs, les éléments à fermeture automatique (tels que img / hr / input) sont également appelés «éléments remplacés», car ils sont remplacés par leur contenu respectif. “Objets externes” pour l’absence d’un meilleur terme. Une meilleure lecture ici

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

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

Voir sur Codepen

Vous ne pouvez pas mettre un pseudo-élément dans un élément d’entrée, mais vous pouvez mettre un élément shadow, comme un espace réservé!

 input[type="text"] { &::-webkit-input-placeholder { &:before { // your code } } } 

Pour que cela fonctionne dans d’autres navigateurs, utilisez :-moz-placeholder , ::-moz-placeholder et :-ms-input-placeholder dans différents sélecteurs . Impossible de regrouper les sélecteurs, car si un navigateur ne reconnaît pas le sélecteur, il invalide la totalité de l’instruction.

UPDATE : Le code ci-dessus ne fonctionne qu’avec le pré-processeur CSS (SASS, LESS …), sans utilisation de pré-processeurs:

 input[type="text"]::-webkit-input-placeholder:before { // your code } 

J’ai trouvé ce post car j’avais le même problème, c’était la solution qui fonctionnait pour moi. Au lieu de remplacer la valeur de l’entrée, supprimez-la et positionnez absolument un intervalle de la même taille, le span peut avoir une pseudo-classe :before qui lui est appliquée avec la police d’icône de votre choix.

Les pseudo-éléments comme :after :before ne sont que des éléments de conteneur. Les éléments commençant et se fermant à un seul endroit comme , etc. ne sont pas des éléments de conteneur et les pseudo-éléments ne sont donc pas pris en charge. Une fois que vous appliquez un pseudo-élément à un élément de conteneur tel que

et que vous inspectez le code (voir l’image), vous pouvez comprendre ce que je veux dire. En fait, le pseudo-élément est créé à l’intérieur de l’élément conteneur. Ceci n’est pas possible dans le cas de ou

Selon une note de la spécification CSS 2.1, la spécification «ne définit pas complètement l’interaction de: before et: after avec des éléments remplacés (tels que IMG en HTML). Ceci sera défini plus en détail dans une future spécification. »Bien que l’ input ne soit plus vraiment un élément remplacé, la situation de base n’a pas changé: l’effet de :before et :after , non spécifié et généralement sans effet.

La solution consiste à trouver une approche différente du problème que vous essayez de résoudre de cette manière. Placer le contenu généré dans un contrôle de saisie de texte serait très trompeur: pour l’utilisateur, il semblerait qu’il fasse partie de la valeur initiale dans le contrôle, mais il ne peut pas être modifié – il semblerait donc que quelque chose soit forcé au début du contrôle. contrôle, mais pourtant il ne serait pas soumis dans le cadre des données de formulaire.

Comme d’autres l’ont expliqué, les input sont des éléments vides quelque peu remplacés, de sorte que la plupart des navigateurs ne vous permettent pas de générer des pseudo-éléments ::before nor ::after .

Cependant, le groupe de travail CSS envisage d’autoriser explicitement ::before et ::after au cas où l’ input aurait l’ appearance: none .

De https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Safari et Chrome permettent tous deux des pseudo-éléments sur leurs entrées de formulaire. Les autres navigateurs ne le font pas. Nous avons examiné la possibilité de le supprimer, mais le compteur d’utilisation enregistre ~ 0,07% des pages qui l’utilisent, ce qui correspond à 20 fois notre seuil de suppression maximum.

Si vous spécifiez des pseudo-éléments sur les entrées, vous devrez spécifier la structure interne des entrées au moins, ce que nous n’avons pas encore réussi à faire (et je ne suis pas sûr * que nous puissions le faire). Mais Boris a suggéré, dans l’un des bugs, de l’autoriser en apparence: pas d’intrants – en gros, il suffit de les transformer en éléments

plutôt qu’en éléments “un peu remplacés”.

Une solution de travail en CSS pur:

L’astuce consiste à supposer qu’il existe un élément dom après le champ de texte.

 /* * The sortingck is here: * this selector says "take the first dom element after * the input text (+) and set its before content to the * value (:before). */ input#myTextField + *:before { content: "👍"; } 

Vous devez avoir une sorte de wrapper autour de l’entrée pour utiliser un pseudo-élément avant ou après. Voici un violon qui a un avant sur la div wrapper d’une entrée et place ensuite l’avant dans l’entrée – ou du moins, il y ressemble. De toute évidence, il s’agit d’un travail de contournement mais efficace à la rigueur et qui se prête à être réactif. Vous pouvez facilement en faire un après si vous avez besoin de mettre un autre contenu.

Violon de travail

Signe du dollar à l’intérieur d’une entrée en tant que pseudo-élément: http://jsfiddle.net/kapunahele/ose4r8uj/1/

Le HTML:

Le CSS:

 input { margin: 3em; padding-left: 2em; padding-top: 1em; padding-bottom: 1em; width:20%; } .test { position: relative; background-color: #dedede; display: inline; } .test:before { content: '$'; position: absolute; top: 0; left: 40px; z-index: 1; } 

essayez ensuite:

 label[for="userName"] { position: relative; } label[for="userName"]::after { content: '[after]'; width: 22px; height: 22px; display: inline-block; position: absolute; right: -30px; } 

  Name:   

Si vous essayez de donner un style à un élément d’entrée avec: avant et: après, vous tentez d’ imiter les effets d’autres éléments span, div ou même de votre stack CSS.

Comme le souligne la réponse de Robert Koritnik: before et: after ne peuvent être appliqués qu’aux éléments de conteneur et les éléments d’entrée ne sont pas des conteneurs.

Cependant, HTML 5 a introduit l’élément button qui est un conteneur et se comporte comme un élément input [type = “submit | reset”].

   
    Submit  

Résumé

Il ne fonctionne pas avec , mais il fonctionne bien avec .

Violon : http://jsfiddle.net/gb2wY/50/

HTML :

CSS :

 #submit-button::before, #submit-cb::before { content: ' '; background: transparent; border: 3px solid crimson; display: inline-block; width: 100%; height: 100%; padding: 0; margin: -3px -3px; } 

:before et :after ne fonctionne que pour les noeuds pouvant avoir des noeuds enfants car ils insèrent un nouveau noeud en tant que premier ou dernier noeud.

J’ai trouvé que tu peux le faire comme ça:

 .submit .btn input { padding:11px 28px 12px 14px; background:#004990; border:none; color:#fff; } .submit .btn { border:none; color:#fff; font-family: 'Open Sans', sans-serif; font-size:1em; min-width:96px; display:inline-block; position:relative; } .submit .btn:after { content:">"; width:6px; height:17px; position:absolute; right:36px; color:#fff; top:7px; } 

Vous pouvez utiliser l’élément after ou before dans votre bloc parent avec jQuery. comme ça:

 $(yourInput).parent().addClass("error-form-field");