Cerca
Filtra la ricerca ...
Frase esatta
Categorie

Select con Bootstrap, il CSS e l’HTML

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 bootstrap E con un pò di fantasia e conoscenza di CSS si possono realizzare anche delle varianti di select colorate, per esempio :

select colorata con bootstrap Buon lavoro e alla prossima !

Potrebbe interessarti anche ...

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.