È possibile invece utilizzare l'icona Font Awesome per selezionare il segno di discesa predefinito

Question

Vorrei utilizzare l'icona "fa-chevron-down" del font al posto dello stile predefinito della casella di selezione html. Si prega di vedere l'immagine allegata.

Answer 1

È possibile farlo con le classi pseudo. Ho seguito i passi here e modificato eliminando le trasformazioni, utilizzando FontAwesome come il mio carattere, e l'UTF-8 per l'icona come il contenuto as instructed here:

select { 
 
padding:4px; 
 
margin: 0; 
 
background: #fff; 
 
color:#888; 
 
border:none; 
 
outline:none; 
 
display: inline-block; 
 
-webkit-appearance:none; 
 
-moz-appearance:none; 
 
appearance:none; 
 
cursor:pointer; 
 
width: 150px; 
 
-webkit-border-radius: 0px; 
 
-moz-border-radius: 0px; 
 
border-radius: 0px; 
 
} 
 

 
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
select {padding-right:18px} 
 
} 
 

 
label {position:relative} 
 
label:after { 
 
content:"\f078"; 
 
font-family: "FontAwesome"; 
 
font-size: 11px; 
 
color:#aaa; 
 
right:8px; top:4px; 
 
padding:0 0 2px; 
 
position:absolute; 
 
pointer-events:none; 
 
} 
 
label:before { 
 
content:''; 
 
right:4px; top:0px; 
 
width:23px; height:18px; 
 
background:#fff; 
 
position:absolute; 
 
pointer-events:none; 
 
display:block; 
 
}

Here's a codepen in action.