10 Fragmente de casetă de selectare CSS și JavaScript gratuite

Casetele de selectare HTML implicite ne-au servit bine de zeci de ani. Dar în epoca modernă, este corect să spunem că sunt puțin... învechite.

Designerii se pot descurca mai bine și, datorită progreselor în CSS, este ușor să personalizați casetele de selectare. Ca să nu mai vorbim de tot codul open source disponibil gratuit online.

Am organizat o colecție de top 10 ale mele pentru stiluri de casete selectate manual. Acestea nu sunt lansate ca plugin-uri, ci se bazează pe șabloane pentru personalizarea JavaScript și CSS. Dar toate sunt la fel de ușor de configurat și chiar de remodat pentru propriile scopuri.

1. Meniu de selectare personalizat

Lansarea colecției este stilurile de meniu personalizate ale lui Wallace Erick.

Utilizează atât CSS pentru restyling, cât și JavaScript pentru configurarea UX a meniurilor. Ele se comportă puțin diferit față de selecțiile HTML standard și cred că sunt puțin mai plăcute de utilizat.

Puteți alege dimensiunea și stilul de culoare al meniului sau puteți lucra cu setările implicite ale lui Wallace. Cel mai bun dintre toate, include un design personalizat de câmp de încărcare pe care, dacă ați încercat vreodată să-l remodați, veți ști că este greu.

Un loc excelent pentru a începe dacă doriți doar meniuri selectate curate, dar cu aspect proaspăt, care funcționează.

2. Selectare simplă

Iată o altă casetă de selectare foarte simplă care își propune să se integreze mai natural în fiecare aspect.

Aceasta se bazează pe culori mai subtile, cu o schemă simplă de culori alb-negru. Dar folosește și JavaScript pentru a anima meniul selectat în și în afara vizualizării.

Funcționează prin direcționarea unui câmp de intrare ascuns care se comportă la fel ca câmpul selectat. În acest fel, puteți încă să extrageți date din interfață în formularele dvs., deoarece această soluție nu folosește din punct de vedere tehnic elementul <select> .

Dacă compatibilitatea este o problemă, sări peste aceasta. Dar trebuie să recunosc că designul este superb și ar fi perfect pentru traficul pe desktop.

3. Mențiuni derulante HTML non-sucky

După cum sugerează și numele, acest pachet de meniuri selectate își propune pur și simplu să nu fie supărat. Toate au stiluri și dimensiuni diferite, cu butoane pe care puteți face clic pentru a schimba culorile la cerere.

Evident, puteți elimina această caracteristică în propriul aspect și puteți rămâne la o schemă care funcționează pentru site-ul dvs. Dar, în general, aceste meniuri selectate funcționează la fel ca unul normal și sunt minunate de utilizat.

Dacă vă faceți griji cu privire la compatibilitate, luați în considerare lucrul cu acest șablon.

Majoritatea modificărilor sunt cosmetice, așa că nu ar trebui să afecteze foarte mult comportamentul utilizatorului.

4. Selectare substituent

Designul real al acestui meniu de selectare a substituentului este superb, dar designul nu este singurul factor aici.

Dezvoltatorul James Nowland a creat acest meniu cu scopul de a elimina opțiunea implicită din opțiunea de selecție. Aceasta înseamnă că se comportă mai mult ca un substituent în câmpurile de text unde îl vedeți când câmpul este gol, dar odată ce setați o valoare, aceasta dispare.

Este pe deplin compatibil și funcționează cu elementul de selecție HTML real. Un câmp de opțiune este ascuns în mod implicit ori de câte ori utilizatorul alege o alegere. În acest fel, nu veți vedea niciodată textul „selectați o opțiune” oriunde în meniul drop-down. Soluție cu adevărat creativă!

5. Design plat

Estetica contează adesea în designul web și acest meniu de selectare plat este un exemplu grozav.

Încă funcționează la fel ca o selecție tipică, iar porțiunea drop-down nu a fost schimbată deloc. Dar doar restyling-ul selectului în sine însuflețește pagina. Se simte mult mai clasic decât implicit browserul urât.

Puteți chiar să luați acest șablon și să-l extindeți cu propriile stiluri plate aplicate în zona derulantă. Total apelul tău!

Dar, ca șablon de pornire, aceasta este una dintre cele mai simple alegeri pentru orice interfață.

6. CSS pur

Sunt un mare fan al CSS pur peste JavaScript, deoarece simplifică întregul proces de proiectare. Acest lucru nu este ușor, dar există atât de multe soluții.

Unul dintre preferatele mele este acest fragment care conține nu doar meniuri de selectare CSS pur, ci și radiouri și casete de selectare.

Toate arată fenomenal și ar trebui să se integreze în orice tip de aspect. Aveți control deplin pentru a face modificări în CSS și cel mai bun dintre toate acestea ar trebui să funcționeze și în toate browserele majore.

7. Mențiuni derulante accesibile cu stil

Iată unul dintre exemplele mai stilizate de ceea ce puteți face cu meniurile selectate. Acest fragment creat de Andy Fitzsimon se bazează pe JavaScript pentru efectul drop-down și folosește CSS personalizat pentru gradienți și pictograme săgeți.

Ceea ce este frumos este că acest meniu acceptă și caracteristica no-JS, așa că va funcționa chiar dacă JavaScript este dezactivat. Se numește degradare grațioasă și este cel mai bun prieten al unui dezvoltator web pentru accesibilitate.

Totuși, aceste meniuri selecte rulează gradienții web 2.0 vechi, care ar putea să nu se încadreze într-un design pentru 2017 și ulterior.

Dar acest lucru arată că puteți duce meniuri selectate oriunde doriți, cu puțină creativitate. Și acestea pot funcționa surprinzător de bine dacă vă spargeți drumul prin CSS pentru a le personaliza puțin.

8. Meniu pictogramă SVG

Meniurile de selectare implicite au pictograma săgeată în lateral și nu multe altele. Cu puțină magie SVG, puteți transforma acest lucru în orice altă pictogramă doriți.

Acest meniu personalizat are propriul design de pictogramă plus rulând cu un fișier SVG pur. Când faceți clic pentru a extinde meniul, acesta se va anima într-o pictogramă X pentru închidere/ascundere.

Nu am mai văzut așa ceva până acum și arată cât de departe am ajuns depășind limitele browserelor web.

Din păcate, aceasta nu rulează pe elementul de selectare HTML nativ. Este o colecție de elemente din listă în interiorul unui div , așa că ar trebui să vizeze un câmp de intrare ascuns ori de câte ori este selectată o valoare.

Din fericire, acest proces este foarte ușor, așa că dacă doriți acest design pe site-ul dvs., nu ar trebui să ia multă muncă pentru a-l pune în funcțiune.

9. Selectați Box Experiment

Iată un design experimental care mi-a atras cu adevărat atenția. Ecranul demonstrativ de comparație arată cât de diferit este acesta de meniurile obișnuite selectate și cum modifică experiența utilizatorului.

Când atingeți/dați clic pentru prima dată pentru a deschide meniul, acesta va glisa în jos cu efecte de animație complete. Dar nu se va ascunde decât dacă dați clic din nou pe meniu, spre deosebire de meniurile de selectare obișnuite care se ascund atunci când faceți clic în altă parte a paginii.

Un exemplu foarte bun de design curat cu animație simplă. Dar dacă nu vă place caracteristica lipsă clic-pentru-ascunde, aceasta poate fi o problemă.

10. Selectează întuneric și lumină

Dacă îți place și CSS pur și vrei selecții elegante, verifică această soluție și încearcă să folosești una dintre ele ca șablon de pornire.

Ambii se bazează pe gradienți CSS pentru fundal și îmbină meniurile drop-down în culoarea inferioară a gradientului. Acesta nu folosește niciun plugin JavaScript, așa că puteți realiza acest lucru cu doar puțin CSS și un efort creativ.

Rețineți că CSS-ul în sine este destul de complicat, așa că vă ajută dacă vă cunoașteți limba. Dar, ca punct de plecare, aceasta este una dintre cele mai bune alegeri pe care le veți găsi și lasă mult spațiu și pentru personalizare.