Ecco tre soluzioni:
Soluzione n. 1 - aspetto: nessuno - con soluzione alternativa a Internet Explorer 10-11 ( Demo )
-
Per nascondere la freccia predefinita impostata appearance: nonesull'elemento select, quindi aggiungi la tua freccia personalizzata conbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Supporto browser:
appearance: noneha un ottimo supporto per il browser ( caniuse ) - ad eccezione di Internet Explorer 11 (e versioni successive) e Firefox 34 (e versioni successive).
Possiamo migliorare questa tecnica e aggiungere il supporto per Internet Explorer 10 e Internet Explorer 11 aggiungendo
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Se Internet Explorer 9 è un problema, non abbiamo modo di rimuovere la freccia predefinita (il che significherebbe che ora avremmo due frecce), ma potremmo usare un selettore funky di Internet Explorer 9.
Per annullare almeno la nostra freccia personalizzata, lasciando intatta la freccia di selezione predefinita.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Tutti insieme:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Questa soluzione è semplice e ha un buon supporto per il browser - dovrebbe generalmente essere sufficiente.
Se è necessario il supporto del browser per Internet Explorer 9 (e versioni successive) e Firefox 34 (e versioni successive), continua a leggere ...
Soluzione n. 2 Tronca l'elemento select per nascondere la freccia predefinita ( demo )
-
(Leggi di più qui)
Avvolgi l' selectelemento in un div con una larghezza fissa e overflow:hidden.
Quindi assegna selectall'elemento una larghezza di circa 20 pixel maggiore del div .
Il risultato è che la freccia a discesa predefinita selectdell'elemento sarà nascosta (a causa della presenza overflow:hiddensul contenitore) e puoi posizionare qualsiasi immagine di sfondo che desideri sul lato destro del div.
Il vantaggio di questo approccio è che è cross-browser (Internet Explorer 8 e versioni successive, WebKit e Gecko ). Tuttavia, lo svantaggio di questo approccio è che il menu a discesa delle opzioni si sporge sul lato destro (dai 20 pixel che abbiamo nascosto ... perché gli elementi delle opzioni assumono la larghezza dell'elemento selezionato).
[Va notato, tuttavia, che se l'elemento di selezione personalizzato è necessario solo per i dispositivi mobili - quindi il problema sopra riportato non si applica - a causa del modo in cui ciascun telefono apre nativamente l'elemento di selezione. Quindi, per i dispositivi mobili, questa potrebbe essere la soluzione migliore.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Se la freccia personalizzata è necessaria su Firefox, prima della versione 35 , ma non è necessario supportare le versioni precedenti di Internet Explorer, continua a leggere ...
Soluzione n. 3: utilizzare la pointer-eventsproprietà ( demo )
-
(Leggi di più qui)
L'idea qui è di sovrapporre un elemento sopra la freccia a discesa nativa (per crearne uno personalizzato) e quindi non consentire eventi puntatore su di esso.
Vantaggio: funziona bene in WebKit e Gecko. Sembra anche buono (nessun optionelemento sporgente ).
Svantaggio: Internet Explorer (Internet Explorer 10 e versioni precedenti) non supporta pointer-events, il che significa che non è possibile fare clic sulla freccia personalizzata. Inoltre, un altro (ovvio) svantaggio di questo metodo è che non puoi scegliere come target la tua nuova freccia con un effetto hover o cursore della mano, perché abbiamo appena disabilitato gli eventi del puntatore su di essi!
Tuttavia, con questo metodo è possibile utilizzare Modernizer o commenti condizionali per ripristinare la freccia incorporata standard in Internet Explorer.
NB: Essendo che Internet Explorer 10 non supporta conditional commentspiù: se vuoi usare questo approccio, dovresti probabilmente usare Modernizr . Tuttavia, è ancora possibile escludere i CSS degli eventi puntatore da Internet Explorer 10 con un hack CSS descritto qui .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->