come applicare uno stile css a select

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 defaultL’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 jqueryAltri 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

Programmatore WordPress e Joomla, PHP/MySQL.
Sono freelance mi trovi come Professionista Joomla e articolista nella lista ufficiale di joomla.it, e come Professionista WordPress nella lista ufficiale di WUG Italia.
Dal 2006 sono titolare di Web Synapse, una Web Agency di Milano.
Pratico Kung Fu Wing Chun e mi piacciono le tagliatelle al ragù ! :-)

Commenta l'articolo

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?