Posso usare uno pseudo-elemento: before o: after su un campo di input?

Sto cercando di utilizzare lo :afterpseudo-elemento CSS su un inputcampo, ma non funziona. Se lo uso con un span, funziona bene.

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

Funziona (mette la faccina dopo "buu!" E prima di "ancora un po '")

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

Questo non funziona - colora solo alcuniValore in rosso, ma non c'è smiley.

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

Che cosa sto facendo di sbagliato? dovrei usare un altro pseudo-selettore?

Nota: non riesco ad aggiungere un in spangiro my input, perché viene generato da un controllo di terze parti.

:aftere :beforenon sono supportati in Internet Explorer 7 e versioni precedenti, su alcun elemento.

Inoltre, non è pensato per essere utilizzato su elementi sostituiti come elementi del modulo (input) ed elementi dell'immagine .

In altre parole, è impossibile con CSS puro.

Tuttavia, se si utilizza jquery è possibile utilizzare

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

Documenti API su .after

Per aggiungere i tuoi contenuti con JavaScript. Funzionerà su tutti i browser.

:beforee :afterrendering all'interno di un contenitore

e <input> non può contenere altri elementi.

Gli pseudo-elementi possono essere definiti (o meglio detti solo supportati) sugli elementi contenitore. Perché il modo in cui sono resi è all'interno del contenitore stesso come elemento figlio. inputnon può contenere altri elementi quindi non sono supportati. A buttond'altra parte, anche questo è un elemento di modulo che li supporta, perché è un contenitore di altri sotto-elementi.

Se mi chiedete, se qualche navigatore fa visualizzare questi due pseudo-elementi su elementi non del contenitore, è un bug e una conformità non standard. Le specifiche parlano direttamente del contenuto degli elementi ...

Specifiche del W3C

Se leggiamo attentamente la specifica , in realtà dice che sono inseriti all'interno di un elemento contenente:

Gli autori specificano lo stile e la posizione del contenuto generato con gli pseudo-elementi: before e: after. Come indicano i loro nomi, gli pseudo-elementi: before e: after specificano la posizione del contenuto prima e dopo il contenuto dell'albero del documento di un elemento. La proprietà 'content', insieme a questi pseudo-elementi, specifica cosa viene inserito.

Vedere? contenuto dell'albero dei documenti di un elemento . A quanto ho capito, questo significa all'interno di un contenitore.

Stranamente, funziona con alcuni tipi di input. Almeno in Chrome,

<input type="checkbox" />

funziona bene, lo stesso di

<input type="radio" />

È solo type=texte alcuni altri che non funzionano.

Ecco un altro approccio (supponendo che tu abbia il controllo dell'HTML): aggiungi un vuoto <span></span>subito dopo l'input e scegli come target quello nel CSSinput.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>

Sto usando questo approccio in AngularJS perché aggiungerà .ng-invalidautomaticamente le classi agli <input>elementi del modulo e al modulo, ma non al <label>.

:beforee :aftervengono applicati all'interno di un contenitore, il che significa che è possibile utilizzarlo per gli elementi con un tag di fine.

Non si applica agli elementi a chiusura automatica.

In una nota a margine, gli elementi che si chiudono automaticamente (come img / hr / input) sono anche noti come "elementi sostituiti", in quanto vengono sostituiti con i rispettivi contenuti. "Oggetti esterni" per la mancanza di un termine migliore. Una lettura migliore qui

Ho usato il background-imageper creare il punto rosso per i campi obbligatori.

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

Visualizza su Codepen

Non puoi inserire uno pseudo elemento in un elemento di input, ma puoi inserire un elemento shadow, come un segnaposto!

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

Per farlo funzionare in altri browser, l'uso :-moz-placeholder, ::-moz-placeholdere :-ms-input-placeholder in diversi selettori . Non è possibile raggruppare i selettori, perché se un browser non riconosce il selettore invalida l'intera istruzione.

AGGIORNAMENTO : Il codice sopra riportato funziona solo con il pre-processore CSS (SASS, LESS ...), senza pre-processori usare:

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

Pseudo elementi come :after, :beforesono solo per elementi contenitore. Gli elementi che iniziano e si chiudono in un unico posto come <input/>, <img>ecc. , Non sono elementi contenitore e quindi gli pseudo elementi non sono supportati. Una volta applicato uno pseudo elemento a un elemento contenitore simile <div>e se si controlla il codice (vedere l'immagine), è possibile capire cosa intendo. In realtà lo pseudo elemento viene creato all'interno dell'elemento contenitore. Questo non è possibile in caso di <input>o<img>

Una soluzione funzionante in puro CSS:

Il trucco è supporre che ci sia un elemento dom dopo il campo di testo.

/*
 * 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>

(*) Soluzione limitata, tuttavia:

• devi sperare che ci sia un seguente elemento dom,
• devi sperare che nessun altro campo di input segua il tuo campo di input.

Ma nella maggior parte dei casi, conosciamo il nostro codice, quindi questa soluzione sembra efficiente e 100% CSS e 0% jQuery.

Ho trovato questo post mentre stavo avendo lo stesso problema, questa era la soluzione che ha funzionato per me. A differenza della sostituzione del valore dell'input, basta rimuoverlo e posizionare assolutamente uno span dietro la stessa dimensione, lo span può avere una :beforepseudo classe applicata ad esso con il carattere icona di tua scelta.

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

Il più grande fraintendimento qui è il significato delle parole beforee after. Non si riferiscono all'elemento stesso, ma al contenuto nell'elemento. Lo stesso element:beforevale prima del contenuto e element:afterdopo il contenuto, ma entrambi sono ancora all'interno dell'elemento originale.

L' inputelemento non ha contenuto nella vista CSS e quindi non ha contenuto :beforeo :afterpseudo. Questo vale per molti altri elementi nulli o sostituiti.

Non esiste alcun pseudo elemento che si riferisce all'esterno dell'elemento.

In un universo diverso, questi pseudo elementi avrebbero potuto essere chiamati qualcos'altro per rendere più chiara questa distinzione. E qualcuno potrebbe anche aver proposto uno pseudo elemento che è veramente al di fuori dell'elemento. Finora, questo non è il caso in questo universo.

Secondo una nota nella specifica CSS 2.1, la specifica “non definisce completamente l'interazione di: before e: after con elementi sostituiti (come IMG in HTML). Questo sarà definito in modo più dettagliato in una specifica futura. " Sebbene inputnon sia più un elemento sostituito, la situazione di base non è cambiata: l'effetto di :beforee :aftersu di esso non è specificato e generalmente non ha alcun effetto.

La soluzione è trovare un approccio diverso al problema che stai cercando di affrontare in questo modo. Mettere il contenuto generato in un controllo di input di testo sarebbe molto fuorviante: per l'utente sembrerebbe essere parte del valore iniziale nel controllo, ma non può essere modificato, quindi sembrerebbe essere qualcosa di forzato all'inizio del controllo, ma non verrebbe inviato come parte dei dati del modulo.

Come altri hanno spiegato, inputs sono elementi vuoti in qualche modo sostituiti, quindi la maggior parte dei browser non ti consente di generare ::beforené ::afterpseudo-elementi in essi.

Tuttavia, il gruppo di lavoro CSS sta prendendo in considerazione esplicitamente il permesso ::beforee, ::afternel caso, lo inputha fatto appearance: none.

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

Safari e Chrome consentono entrambi pseudo-elementi nei loro input di modulo. Gli altri browser no. Abbiamo cercato di rimuoverlo, ma il contatore degli usi sta registrando ~ .07% delle pagine che lo utilizzano, che è 20 volte la nostra soglia di rimozione massima.

La specifica effettiva degli pseudo-elementi sugli input richiederebbe di specificare almeno un po 'la struttura interna degli input, cosa che non siamo ancora riusciti a fare (e non sono sicuro di poter * fare *). Ma Boris ha suggerito, in uno dei bugthreads, di permetterlo in apparenza: nessuno input - fondamentalmente semplicemente trasformandoli in <div> s, piuttosto che elementi "sostituiti in qualche modo".

prova dopo:

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>

Devi avere una sorta di wrapper attorno all'input per usare uno pseudo-elemento prima o dopo. Ecco un violino che ha un precedente sul div wrapper di un input e quindi posiziona il prima all'interno dell'input - o almeno sembra simile. Ovviamente, questo è un modo per aggirare ma efficace in un pizzico e si presta ad essere reattivo. Puoi farlo facilmente dopo aver bisogno di aggiungere altri contenuti.

Fiddle di lavoro

Simbolo del dollaro all'interno di un input come pseudo-elemento: http://jsfiddle.net/kapunahele/ose4r8uj/1/

HTML:

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

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

Se stai cercando di modellare un elemento di input con: before e: after, le probabilità sono che stai cercando di imitare gli effetti di altri span, div o persino elementi nel tuo stack CSS.

Come sottolinea la risposta di Robert Koritnik,: prima e dopo possono essere applicati solo agli elementi contenitore e gli elementi di input non sono contenitori.

TUTTAVIA, HTML 5 ha introdotto l' elemento button che è un contenitore e si comporta come un input [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>

Sommario

Non funziona con <input type="button">, ma funziona bene con <input type="checkbox">.

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

:beforee :afterfunziona solo per i nodi che possono avere nodi figlio poiché inseriscono un nuovo nodo come primo o ultimo nodo.

Ho scoperto che puoi farlo in questo modo:

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

Devi avere un genitore div che prende il padding e il: after. Il primo genitore deve essere relativo e il secondo div deve essere assoluto in modo da poter impostare la posizione del dopo.

Ho un'altra idea usare questo invece:

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