Come personalizzare la freccia di una select

Vi siete mai chiesti se è possibile personalizzare la freccia di una select senza ricorrere all'uso di jquery?
Come personalizzare la freccia di una select

E’ possibile?

Vi siete mai chiesti come personalizzare la freccetta di una select senza ricorrere all’uso di jquery?

Da premettere che non è possibile farlo esclusivamente con i css ma attraverso qualche trucchetto si può sostituire con un’immagine che senza ombra di dubbio risulterà molto più gradevole rispetto a quelle impostate dai browser.

Naturalmente prendete questo post come una sperimentazione.

Come eliminiamo la freccia?

Vediamo innanzitutto l’html e il css di base:

<div id="contentSelect">
   <select>
      <option>Lista</option>
      <option>Lista</option>
      <option>Lista</option>
      <option>Lista</option>		
   </select>
</div>
select{width:150px; padding:5px; line-height:20px; border:none;}

Chrome

Per eliminare la freccetta della select su browser webkit possiamo affidarci alla proprietà appearance settata sul valore none.

select{-webkit-appearance:none;}

Internet Explorer 10

Questo invece è il trick per IE10.

select::-ms-expand {
    display: none;
}

Compatibile con tutti i browser

Quest’ultimo non è un vero è proprio trick ma un modo “creativo” per raggirare il problema crossbrowsing. A mio parere è sicuramente quello più adatto vista la piena compatibilità.

  .contentSelect{width:150px; overflow:hidden;}
  select{width:120%;}

Conclusione

Dopo aver impostato il css per far sì che la freccia scompaia su ogni browser possiamo finalmente inserire quella personalizzata come background. Date un’occhiata all’esempio 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github