In questa guida voglio spiegare come realizzare una select con Bootstrap ed assegnargli uno stile CSS ; infatti nativamente la select apparirebbe in questo modo :
se siete un pò esigenti come me e pensate che anche l’occhio voglia la sua parte, allora è necessario trovare una soluzione, ed esiste, per la gioia di entrambi 
Come personalizzare una select con Bootstrap
Bootstrap a mio parere è stata una rivoluzione nel campo dei framework CSS, l’unico neo è che nativamente non vengono stilizzate le select, in questo articolo invece spiego come utilizzare la libreria bootstrap-select.js realizzata da Silvio Moreto, qui trovate il link a Github http://silviomoreto.github.io/bootstrap-select/ .
Lo script in sostanza si occupa di “trasformare” la select in un menu dropdown Bootstrap, idea geniale a mio parere!
L’utilizzo è davvero molto semplice, vediamo subito come fare.
Codice HTML per select Bootstrap
L’importante è assegnare le classi selectpicker e show-menu-arrow al tag select, la prima classe è definita nel file bootstrap-select.js e la seconda permette semplicemente di mostrare la freccia in alto a sinistra all’apertura della select.
Ora all’interno del tag <head> e prima della sua chiusura, non ci resta che richiamare il file .js ed il relativo foglio di stile .css, quindi
Il risultato è fantastico
E con un pò di fantasia e conoscenza di CSS si possono realizzare anche delle varianti di select colorate, per esempio :
Buon lavoro e alla prossima !
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.