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


J'essaie d'utiliser le :after CSS pseudo-élément sur un input champ, mais cela ne fonctionne pas. Si je l'utilise avec un span, ça 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 ne fait que colorer someValue en rouge, mais il n'y a pas de smiley.

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

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

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


541
2018-04-06 19:28


origine


Réponses:


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

Il n'est également pas destiné à être utilisé sur des éléments remplacés tels que éléments de formulaire (entrées) et é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 dans tous les navigateurs.


222
2018-04-07 10:01



:before et :after rendre à 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 dit que supportés) sur les éléments du conteneur. Parce que la façon dont ils sont rendus est dans le conteneur lui-même en tant qu'élément enfant. input ne peut pas contenir d'autres éléments donc ils ne sont pas supportés. UNE button d'un autre côté c'est aussi un élément de formulaire qui les supporte, car c'est un conteneur d'autres sous-éléments.

Si vous me demandez, si un navigateur Est-ce que afficher ces deux pseudo-éléments sur des éléments non-conteneur, c'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 il dit en fait qu'ils sont insérés à l'intérieur 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 leur nom l'indique, les pseudo-éléments: before et: after spécifient l'emplacement du contenu avant et après le contenu de l'arborescence de document d'un élément. La propriété 'content', en conjonction avec ces pseudo-éléments, spécifie ce qui est inséré.

Voir? l'arbre de document d'un élément contenu


1108
2018-01-11 17:18



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.


55
2017-12-24 09:56



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 cibler cela en CSS en utilisant input.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 va ajouter .ng-invalid classes automatiquement à <input> éléments de formulaire, et à la forme, mais pas au <label>.


31
2017-07-13 20:25



:before et :after sont appliquées à l'intérieur d'un conteneur, ce qui signifie que vous pouvez l'utiliser pour les éléments avec une étiquette de fin.

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

D'un autre côté, les éléments qui se referment automatiquement (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


28
2018-01-13 12:25



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%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Voir sur Codepen


23
2018-06-17 11:40



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

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

Pour le faire fonctionner dans d'autres navigateurs, utilisez :-moz-placeholder, ::-moz-placeholder et :-ms-input-placeholder  dans différents sélecteurs. Impossible de grouper les sélecteurs, car si un navigateur ne reconnaît pas le sélecteur, il annule l'intégralité de l'instruction.

METTRE À JOUR: 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 }

21
2017-11-13 21:10