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 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 !

Potrebbe interessarti anche ...

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

Lascia un commento

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