10 frammenti di casella di selezione CSS e JavaScript gratuiti

Le caselle di selezione HTML predefinite ci hanno servito bene per decenni. Ma nell'era moderna, è giusto dire che sono un po'... stantii.

I designer possono fare di meglio e grazie ai progressi nei CSS è facile personalizzare le caselle di selezione. Per non parlare di tutto il codice open source liberamente disponibile online.

Ho curato una raccolta delle mie prime 10 scelte per gli stili di caselle selezionate fatte a mano. Questi non vengono rilasciati come plug-in ma si basano invece su modelli per la personalizzazione di JavaScript e CSS. Ma sono tutti altrettanto facili da configurare e persino da rimodellare per i tuoi scopi.

1. Menu di selezione personalizzato

A dare il via alla collezione sono gli stili di menu di selezione personalizzati di Wallace Erick.

Utilizza sia CSS per il restyling che JavaScript per configurare l'UX dei menu. Si comportano in modo leggermente diverso rispetto alle selezioni HTML standard e penso che siano un po' più piacevoli da usare.

Puoi scegliere la dimensione e lo stile del colore del menu o lavorare con le impostazioni predefinite di Wallace. Soprattutto include un design del campo di caricamento personalizzato che, se hai mai provato a rinnovare, saprai che è difficile.

Un ottimo punto di partenza se vuoi solo un menu selezionato pulito ma dall'aspetto fresco che funzioni.

2. Selezione semplice

Ecco un'altra casella di selezione molto semplice che mira a fondersi in modo più naturale in ogni layout.

Questo si basa su colori più tenui con una semplice combinazione di colori in bianco e nero. Ma usa anche JavaScript per animare il menu di selezione dentro e fuori dalla vista.

Funziona prendendo di mira un campo di input nascosto che si comporta proprio come il campo di selezione. In questo modo puoi ancora estrarre i dati dal frontend nei tuoi moduli, perché questa soluzione tecnicamente non utilizza l'elemento <select> effettivo.

Se la compatibilità è un problema, salta questo. Ma devo ammettere che il design è stupendo e sarebbe perfetto per il traffico desktop.

3. Menu a discesa HTML non dannosi

Come suggerisce il nome, questo pacchetto di menu selezionati mira solo a non fare schifo. Hanno tutti stili e dimensioni variabili con pulsanti su cui puoi fare clic per cambiare i colori su richiesta.

Ovviamente puoi rimuovere quella funzione nel tuo layout e attenerti a uno schema che funziona per il tuo sito. Ma nel complesso questi menu selezionati funzionano proprio come quelli normali e sono splendidi da usare.

Se ti preoccupi della compatibilità, considera di lavorare con questo modello.

La maggior parte delle modifiche sono estetiche, quindi non dovrebbero influenzare molto il comportamento dell'utente.

4. Segnaposto Seleziona

Il design effettivo di questo menu di selezione segnaposto è stupendo, ma il design non è l'unico fattore qui.

Lo sviluppatore James Nowland ha creato questo menu con l'obiettivo di rimuovere l'impostazione predefinita dalla scelta di selezione. Ciò significa che si comporta più come un segnaposto nei campi di testo dove lo vedi quando il campo è vuoto, ma una volta impostato un valore scompare.

È completamente conforme e funziona con l'elemento di selezione HTML effettivo. Un campo opzione è nascosto per impostazione predefinita ogni volta che l'utente sceglie una scelta. In questo modo non vedrai mai il testo "seleziona un'opzione" in nessun punto del menu a discesa. Soluzione davvero creativa!

5. Design piatto

L'estetica è spesso importante nel web design e questo menu di selezione piatto è un ottimo esempio.

Funziona ancora proprio come una selezione tipica e la parte a discesa non è stata affatto modificata. Ma solo il restyling della selezione stessa ravviva la pagina. Sembra molto più elegante del brutto browser predefinito.

Puoi anche prendere questo modello ed espanderlo con i tuoi stili piatti applicati all'area a discesa. Totalmente la tua chiamata!

Ma come modello di partenza questa è una delle scelte più semplici per qualsiasi interfaccia.

6. Puro CSS

Sono un grande fan del CSS puro su JavaScript perché semplifica l'intero processo di progettazione. Non è facile, ma ci sono così tante soluzioni là fuori.

Uno dei miei preferiti è questo snippet che include non solo menu di selezione CSS puri, ma anche radio e caselle di controllo.

Tutti sembrano fenomenali e dovrebbero fondersi in qualsiasi tipo di layout. Hai il pieno controllo per apportare modifiche nel CSS e, soprattutto, queste dovrebbero funzionare anche in tutti i principali browser.

7. Menu a discesa accessibili in stile

Ecco uno degli esempi più stilizzati di cosa puoi fare con i menu selezionati. Questo frammento di codice creato da Andy Fitzsimon si basa su JavaScript per l'effetto a discesa e utilizza CSS personalizzati per i gradienti e le icone delle frecce.

La cosa bella è che questo menu supporta anche la funzione no-JS, quindi funzionerà anche se JavaScript è disabilitato. Si chiama degrado aggraziato ed è il migliore amico di uno sviluppatore web per l'accessibilità.

Tuttavia, questi menu selezionati eseguono i gradienti Web 2.0 della vecchia scuola che potrebbero non adattarsi a un design per il 2017 e oltre.

Ma questo mostra che puoi portare i menu selezionati ovunque tu voglia con un po' di creatività. E questi possono funzionare sorprendentemente bene se ti fai strada attraverso i CSS per personalizzarli un po'.

8. Menu icona SVG

I menu di selezione predefiniti hanno l'icona della freccia a lato e non molto altro. Con un po' di magia SVG puoi trasformarlo in qualsiasi altra icona tu voglia.

Questo menu personalizzato ha il suo design più icona in esecuzione con un file SVG puro. Quando fai clic per espandere il menu, si animerà in un'icona X per chiudere/nascondere.

Non ho mai visto niente di simile prima e mostra fino a che punto siamo arrivati ​​spingendo i limiti dei browser web.

Sfortunatamente questo non funziona sull'elemento select HTML nativo. È una raccolta di voci di elenco all'interno di un div , quindi dovrebbe scegliere come target un campo di input nascosto ogni volta che viene selezionato un valore.

Per fortuna quel processo è davvero semplice, quindi se vuoi questo design sul tuo sito non dovrebbe essere necessario molto lavoro per farlo funzionare.

9. Seleziona Casella Esperimento

Ecco un design sperimentale che ha davvero catturato la mia attenzione. La schermata della demo di confronto mostra quanto sia diverso dai normali menu di selezione e come altera l'esperienza dell'utente.

Quando tocchi/fai clic per la prima volta per aprire il menu, scorrerà verso il basso con effetti di animazione completi. Ma non si nasconderà a meno che non si faccia nuovamente clic sul menu, a differenza dei tipici menu di selezione che si nascondono quando si fa clic in un altro punto della pagina.

Un ottimo esempio di design pulito con animazioni semplici. Ma se non ti piace la funzione di clic per nascondere mancante, questa potrebbe essere un rompicapo.

10. Seleziona Scuro e Chiaro

Se ami anche i CSS puri e desideri selezioni eleganti, dai un'occhiata a questa soluzione e prova a utilizzarne uno come modello iniziale.

Entrambi si basano sui gradienti CSS per gli sfondi e fondono i menu a discesa nel colore inferiore del gradiente. Questo non utilizza alcun plug-in JavaScript, quindi puoi farlo con solo un po' di CSS e un po' di sforzo creativo.

Nota che il CSS stesso è piuttosto complicato, quindi aiuta se conosci la lingua. Ma per cominciare, questa è una delle migliori scelte che troverai e lascia molto spazio anche alla personalizzazione.