select personalizzata con bootstrap

Select con Bootstrap, il CSS e l’HTML

Per questo articolo sono disponibili Demo Download Script

In questa guida voglio spiegare come realizzare una select con Bootstrap ed assegnargli uno stile CSS ; infatti nativamente la select apparirebbe in questo modo :

default select bootstrap

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 🙂

codice select bootstrapE con un pò di fantasia e conoscenza di CSS si possono realizzare anche delle varianti di select colorate, per esempio :

select colorata con bootstrapBuon lavoro e alla prossima !

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 ?