html - span - select after css




Posso usare a: before o: after pseudo-element su un campo di input? (13)

Sto cercando di usare :after pseudo-elemento CSS su un campo di input , ma non funziona. Se lo uso con uno span , funziona OK.

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

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

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

Questo non funziona, ma colora solo un valore in rosso, ma non c'è emoticon.

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

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

Nota: non riesco ad aggiungere span attorno al mio input , perché è generata da un controllo di terze parti.


:before e :after rendering all'interno di un contenitore

e <input> non può contenere altri elementi.

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

Se mi chiedi, se alcuni browser visualizzano questi due pseudo-elementi su elementi non contenitori, è un bug e una conformità non standard. Le specifiche parlano direttamente del contenuto dell'elemento ...

Specifica W3C

Se leggiamo attentamente le specifiche , in realtà dice che sono inserite 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 della struttura del documento di un elemento. La proprietà 'content', insieme a questi pseudo-elementi, specifica cosa viene inserito.

Vedere? il contenuto dell'albero del documento di un elemento . Come ho capito questo significa all'interno di un contenitore.


Come altri hanno spiegato, gli input s sono elementi void sostituiti, quindi la maggior parte dei browser non ti consentirà di generare in ::before pseudo-elementi ::before::after .

Tuttavia, il gruppo di lavoro CSS sta considerando esplicitamente la possibilità di consentire a ::before e ::after nel caso in cui l' input abbia un 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. Altri browser no. Abbiamo esaminato la rimozione di questo, ma il contatore degli usi sta registrando ~ .07% delle pagine che lo utilizzano, ovvero 20 volte la soglia massima di rimozione.

Specificare effettivamente gli pseudo-elementi sugli input richiederebbe di specificare almeno in parte la struttura interna degli input, cosa che non siamo ancora riusciti a fare (e non sono sicuro che * possiamo * fare). Ma Boris suggerì, in uno dei bugthreads, di permetterlo in apparenza: nessun input - in pratica semplicemente trasformandoli in elementi <div> s, piuttosto che "kinda-replace".


Elementi pseudo come :after :before sono solo per elementi contenitore. Gli elementi che iniziano e chiudono in un singolo posto come <input/> , <img> etc non sono elementi contenitore e quindi pseudo elementi non sono supportati. Una volta applicato uno pseudo elemento all'elemento contenitore come <div> e se controlli il codice (vedi l'immagine) puoi capire cosa intendo. In realtà lo pseudo elemento viene creato all'interno dell'elemento contenitore. Questo non è possibile in caso di <input> o <img>


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 prenda 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 usato l' background-image di background-image per creare il punto rosso per i campi richiesti.

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, utilizzare :-moz-placeholder , ::-moz-placeholder e :-ms-input-placeholder in diversi selettori . Impossibile 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 utilizzare i pre-processori:

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

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

Come sottolinea la risposta di Robert Koritnik,: before e: after può essere applicato solo agli elementi del 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 elemento [type = "submit | reset"] di input.

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

Secondo una note nella specifica CSS 2.1, la specifica "non definisce completamente l'interazione di: before e: after con elementi sostituiti (come IMG in HTML). Questo verrà definito più dettagliatamente in una specifica futura. "Sebbene l' input non sia più un elemento sostituito, la situazione di base non è cambiata: l'effetto di :before e :after on it 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 ancora non sarebbe presentato come parte dei dati del modulo.


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 elemento dom successivo,
  • 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 al 100% CSS e 0% jQuery.


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>


:after e :before non sono supportati in Internet Explorer 7 e sotto, su qualsiasi elemento.

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

In altre parole è impossibile con CSS puro.

Comunque se usi jquery puoi usare

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

Documenti API su .after

Per aggiungere il tuo contenuto con javascript. Funzionerà su tutti i browser.


:before e :after funziona solo per i nodi che possono avere nodi figlio poiché inseriscono un nuovo nodo come primo o ultimo nodo.


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






css-content