Come applicare uno stile CSS ad una select

Pubblicato il 18 Luglio 20163 Maggio 2015 · Aggiornato il 18 Luglio 2016jquery select

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

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

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 :

<label>Seleziona un valore</label>

<option value="seleziona" selected>Seleziona</option>

<option value="Joomla">Joomla</option>

<option value="Wordpress">Wordpress</option>

</select>

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>