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 :
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>
Programmatore WordPressesperto WooCommerce, sviluppo di plugin con interfaccia amministrativa.
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Potrebbe interessarti anche ...
JQuery, creare dei loader circolari con la percentuale di avanzamento
Creare un form PHP con Google ReCaptcha Antispam e Bootstrap
Typed.js , testo automatico in stile terminale MacOS e macchina da scrivere
Non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, se vuoi mi chiedi una consulenza nella sezione contatti. Se devi postare codice usa servizi come https://codeshare.io . Grazie della comprensione. Alessio