Cerca
Filtra la ricerca ...
Frase esatta
Categorie

Come applicare uno stile CSS ad una select

Come ben sappiamo le select sono un pò ostiche da personalizzare con il CSS, infatti è possibile personalizzarne solo alcuni aspetti, per esempio lo sfondo, il font o la grandezza del carattere, ma quella benedetta freccia di default rimane sempre la stessa e si adatta in base al browser che stiamo utilizzando 🙁

select stile di default L’unico modo per stilizzare una select e vederla correttamente su tutti i browser e dispositivi mobili è quello di utilizzare plugin jQuery scritti appositamente per le select, oggi quindi spiego jquery.selectBoxIt.js un plugin per personalizzare le select che utilizza jQueryUI e jQuery Mobile.

Come personalizzare una select con jQuery

Per prima cosa prepariamo il codice HTML della nostra select, per esempio :

Successivamente prima della chiusura del tag </head> è necessario richiamare gli stili CSS di jQueryUI e jQuery Mobile

Poi richiamiamo le relative librerie jQuery

Io sto richiamando i file dalle CDN di Google ma potete scaricarle e richiamarle direttamente in locale senza problemi.

I file che fanno la differenza e che permettono di applicare lo stile CSS alla select sono :

  • jquery.selectBoxIt.css
  • jquery.selectBoxIt.min.js

Bene, ora scriviamo un piccolo script che permette l’utilizzo del plugin per stilizzare la select, incolliamo questo codice prima della chiusura del tag </head>

Il risultato è il seguente

select jquery Altri esempi di CSS Select

http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

http://webdesign.tutsplus.com/articles/styling-dark-select-dropdown-with-dropkickjs–webdesign-7961

Potrebbe interessarti anche ...

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.