Puis-je utiliser un pseudo-élément: avant ou: après sur un champ de saisie?

J'essaie d'utiliser le :afterpseudo-élément CSS sur un inputchamp, mais cela ne fonctionne pas. Si je l'utilise avec un span, 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 colore seulement une certaine valeur en rouge, mais il n'y a pas de smiley.

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

Qu'est-ce que je fais mal? dois-je utiliser un autre pseudo-sélecteur?

Remarque: je ne peux pas ajouter un spanautour de mon input, car il est généré par un contrôle tiers.

:afteret :beforene sont pas pris en charge dans Internet Explorer 7 et versions anté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 ajouter votre contenu avec javascript. Cela fonctionnera sur tous les navigateurs.

:beforeet :afterrendre à l'intérieur d'un conteneur

et <input> ne peut pas contenir d'autres éléments.

Les pseudo-éléments ne peuvent être définis (ou mieux ne sont supportés que) sur les éléments conteneurs. Parce que la façon dont ils sont rendus est à l' intérieur le conteneur lui-même en tant qu'élément enfant. inputne peut pas contenir d'autres éléments, ils ne sont donc pas pris en charge. A buttond'autre part, c'est aussi un élément de formulaire qui les prend en charge, car c'est un conteneur d'autres sous-éléments.

Si vous me demandez, si un navigateur n'affiche ces deux pseudo-éléments sur des éléments non-conteneurs, il est un bug et 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 en fait qu'elle est insérée à l' intérieur un élément conteneur:

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

Voir? le contenu de l' arborescence de documents d'un élément . Si je comprends bien, cela signifie dans un conteneur.

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

<input type="checkbox" />

fonctionne bien, comme

<input type="radio" />

C'est juste type=textet quelques autres qui ne fonctionnent pas.

Voici une autre approche (en supposant que vous avez le contrôle du HTML): ajoutez un vide <span></span>juste après l'entrée et ciblez-le en CSS en utilisantinput.mystyle + span:after

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

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

J'utilise cette approche dans AngularJS car elle ajoutera .ng-invalidautomatiquement des classes aux <input>éléments de formulaire et au formulaire, mais pas au <label>.

:beforeet :aftersont 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.

Elle ne s'applique pas aux éléments à fermeture automatique.

En passant, 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é le background-imagepour 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
}

Vue 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 fantôme, comme un espace réservé!

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

Pour le faire fonctionner dans d' autres navigateurs, l' utilisation :-moz-placeholder, ::-moz-placeholderet :-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 invalide l'intégralité de l'instruction.

MISE À JOUR : Le code ci-dessus fonctionne uniquement avec les pré-processeurs CSS (SASS, LESS ...), sans pré-processeurs utiliser:

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

Les pseudo-éléments comme :after, :beforene sont destinés qu'aux éléments conteneurs. Les éléments commençant et se fermant en un seul endroit comme <input/>, <img>etc. ne sont pas des éléments conteneurs et donc les pseudo-éléments ne sont pas pris en charge. Une fois que vous avez appliqué un pseudo-élément à un élément conteneur comme <div>et si 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. Ce n'est pas possible en cas de <input>ou<img>

Une solution de travail en CSS pur:

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

/*
 * The trick 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: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Solution limitée, cependant:

• vous devez espérer qu'il y a un élément dom suivant,
• vous devez espérer qu'aucun autre champ de saisie ne suit votre champ de saisie.

Mais dans la plupart des cas, nous connaissons notre code donc cette solution semble efficace et 100% CSS et 0% jQuery.

J'ai trouvé ce message 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 placez absolument une plage de taille identique derrière la plage, la plage peut avoir une :beforepseudo-classe appliquée avec la police d'icône de votre choix.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Le plus grand malentendu ici est le sens des mots beforeet after. Ils ne se réfèrent pas à l'élément lui-même, mais au contenu de l'élément. Il en element:beforeest de même avant le contenu et element:afteraprès le contenu, mais les deux sont toujours à l'intérieur de l'élément d'origine.

L' inputélément n'a pas de contenu dans la vue CSS et n'a donc pas de contenu :beforeou un :afterpseudo-contenu. Cela est vrai pour de nombreux autres éléments vides ou remplacés.

Il n'y a pas de pseudo-élément faisant référence à l' extérieur de l'élément.

Dans un univers différent, ces pseudo-éléments auraient pu être appelés autrement pour rendre cette distinction plus claire. Et quelqu'un aurait même pu proposer un pseudo-élément qui est véritablement en dehors de l'élément. Jusqu'à présent, ce n'est pas le cas dans cet univers.

Selon une note de la spécification CSS 2.1, la spécification «ne définit pas entièrement l'interaction de: avant et: après avec les éléments remplacés (comme IMG en HTML). Cela sera défini plus en détail dans une future spécification. » Bien que ce inputne soit plus vraiment un élément remplacé, la situation de base n'a pas changé: l'effet de :beforeet :aftersur lui de manière non spécifiée et n'a généralement aucun effet.

La solution consiste à trouver une approche différente du problème que vous essayez de résoudre de cette façon. 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 du contrôle, mais il ne peut pas être modifié - il semblerait donc que ce soit quelque chose de forcé au début de la mais il ne serait pas soumis dans le cadre des données du formulaire.

Comme d'autres l'ont expliqué, les inputs sont des éléments vides un peu remplacés, donc la plupart des navigateurs ne vous permettent pas de générer ::beforeni de ::afterpseudo-éléments en eux.

Cependant, le groupe de travail CSS envisage d'autoriser explicitement ::beforeet ::afterdans le cas inputcontraire appearance: none.

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

Safari et Chrome autorisent tous les deux des pseudo-éléments sur leurs entrées de formulaire. Les autres navigateurs ne le font pas. Nous avons cherché à supprimer cela, mais le compteur d'utilisation enregistre ~ 0,07% des pages l'utilisant, ce qui correspond à 20 fois notre seuil de suppression maximal.

En fait, la spécification de pseudo-éléments sur les entrées nécessiterait de spécifier la structure interne des entrées au moins quelque peu, ce que nous n'avons pas encore réussi à faire (et je ne suis pas sûr que nous * pouvons * faire). Mais Boris a suggéré, dans l'une des bandes de bogues, de l'autoriser à l'apparence: aucune entrée - simplement les transformer en <div> s, plutôt qu'en éléments "un peu remplacés".

essayez ensuite:

label[for="userName"] {
  position: relative;
}

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

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

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, puis place l'avant avant à l'intérieur de l'entrée - ou du moins il y ressemble. Évidemment, c'est un travail autour mais efficace dans un pincement et 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 dollar à l'intérieur d'une entrée en tant que pseudo-élément: http://jsfiddle.net/kapunahele/ose4r8uj/1/

Le HTML:

<div class="test">
    <input type="text"></input>
</div>

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;
}

Si vous essayez de styliser un élément d'entrée avec: avant et: après, les chances sont que vous essayez d' imiter les effets d'autres span, div ou même des éléments de votre pile CSS.

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

TOUTEFOIS, HTML 5 a introduit l' élément button qui est un conteneur et se comporte comme un élément d'entrée [type = "submit | reset"].

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

Sommaire

Cela ne fonctionne pas avec <input type="button">, mais cela fonctionne très bien avec <input type="checkbox">.

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

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

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;
}

:beforeet :afterne fonctionne que pour les nœuds pouvant avoir des nœuds enfants car ils insèrent un nouveau nœud comme premier ou dernier nœud.

J'ai trouvé que vous pouvez le faire comme ceci:

.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;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

Vous devez avoir un parent div qui prend le padding et le: after. Le premier parent doit être relatif et le deuxième div doit être absolu afin que vous puissiez définir la position de l'after.

J'ai une autre idée à utiliser à la place:

<div>
<input type="text"></input>text can be entered here</div>