Beh, tecnicamente non è possibile ottenere :before
e gli :after
pseudo elementi funzionanoinput
elementi
Dal W3C :
12.1 Gli pseudo-elementi: before e: after
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.
Quindi ho avuto un progetto in cui avevo i pulsanti di invio sotto forma di input
tag e per qualche motivo gli altri sviluppatori mi hanno limitato a usare i <button>
tag invece dei soliti pulsanti di invio dell'input, quindi ho trovato un'altra soluzione, di avvolgere i pulsanti all'interno di un span
set per position: relative;
poi assolutamente posizionando l'icona usando :after
pseudo.
Nota: il violino demo utilizza il codice contenuto per FontAwesome 3.2.1, pertanto potrebbe essere necessario modificare di conseguenza il valore della content
proprietà.
HTML
<span><input type="submit" value="Send" class="btn btn-default" /></span>
CSS
input[type="submit"] {
margin: 10px;
padding-right: 30px;
}
span {
position: relative;
}
span:after {
font-family: FontAwesome;
content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
font-size: 13px;
position: absolute;
right: 20px;
top: 1px;
pointer-events: none;
}
Demo
Ora qui tutto è autoesplicativo qui, su una proprietà pointer-events: none;
, cioè , l'ho usato perché passando con il mouse sopra il :after
contenuto pseudo generato, il tuo pulsante non farà clic, quindi usando il valore di none
forzerai l'azione clic per passare attraverso quel contenuto .
Dalla rete di sviluppatori Mozilla :
Oltre a indicare che l'elemento non è il target degli eventi del mouse, il valore none indica all'evento del mouse di "attraversare" l'elemento e di target qualunque cosa sia "sotto" quell'elemento.
Passa con il mouse sul carattere / icona del cuore Demoe vedi cosa succede se NON lo usipointer-events: none;