28 Pola wyboru CSS

Zbiór bezpłatnych przykładów kodu pól wyboru niestandardowych HTML i CSS: menu rozwijane, wiele, niestandardowa strzałka itp. Aktualizacja kolekcji z czerwca 2018 r. 4 nowe pozycje.

1. Pola wyboru jQuery
2. Bootstrap Multi Select Boxes

Informacje o kodzie

Niestandardowe pole wyboru

Niestandardowy styl menu rozwijanego pola wyboru.

Zgodne przeglądarki : Chrome, Edge, Firefox, Opera, Safari

Responsywny: tak

Zależności: font-awesome.css

O kodzie

Czyste pole wyboru CSS z efektem najechania kursorem z uwzględnieniem kierunku

Czysty wybór CSS box bez JavaScript. W przypadku najechania kursorem na opcję ruch ikony wewnątrz opcji jest określany przez kierunek najechania kursorem, tj. W górę lub w dół (efekt najechania kursorem).

Zgodne przeglądarki: Chrome, Edge, Firefox, Opera , Safari

Responsywny: tak

Zależności: font-awesome.css

O kodzie

Pure CSS Select Box

Zaznacz pole bez używania JavaScript i elementu natywnego.

Zgodne przeglądarki: Chrome , Edge, Firefox, Opera, Safari

Responsywny: tak

Zależności: –

Informacje o kodzie

Responsive Custom Select Box

Responsive custom select box with custom scroll.

O kodzie

Wybór obrazu

Wybór obrazu z fałszywym ładowaniem.

O kodzie

Materialize Select

Materialize JS style select.

O kodzie

Custom Select Wrapper

Niestandardowe opakowanie CSS wyboru.

Wybór niestandardowy

Wybór niestandardowy HTML, CSS i jQuery.
Wykonał Alessandro Falchi
5 kwietnia 2017 r.

Niestandardowy Wybierz opcję n

Wybór niestandardowy, zaprojektowany, aby zmienić typowy styl zaznaczania w przeglądarkach, używając JS do wyświetlania listy po kliknięciu i SCSS, aby nadać jej styl. Wybrany atrybut działa dobrze, przetestuj go.
Opracował Dany Santos
8 lutego 2017 r.

Lista rozwijana Material Design

Lista rozwijana Material Design zawierająca HTML, CSS i JavaScript.
Wykonane przez Sama Murpheya
20 stycznia 2017 r.

Wybierz opcję interakcji

Świetny przykład czystej animacji. Zbudowany z TweenMax GSAP.
Autor: Bhakti Al Akbar
7 grudnia 2016 r.

Wybierz pola

Zaznacz pola z HTML, CSS i JS.
Wykonane przez Nipun Paradkar
październik 22, 2016 r.

Lista rozwijana wyboru ze stylem CSS i możliwością filtrowania

Lista rozwijana wyboru – stylizowana i filtrowana za pomocą HTML, CSS i vanilla JS. Działa z użyciem pola wejściowego do pobierania wartości z listy rozwijanej.
Autor: Mari Johannessen
13 października 2016 r.

Wybierz tylko CSS

Wybierz tylko CSS (radio + checkbox).
Wykonane przez Aoyue
24 sierpnia 2016 r.

Zaznacz pole z symbolem zastępczym

Pole wyboru HTML i CSS z symbolem zastępczym.
Wykonane przez Jamesa Nowlanda
16 maja 2016 r.

Wybierz tylko CSS

Wybierz wejście za pomocą wejść radiowych.
Wykonał Nicolas Udy
9 maja 2016 r.

Czysty wybór CSS

Wybierz dane wejściowe, tylko CSS.
Opracował Raúl Barrera
8 kwietnia 2016 r.

Pretty Select Dropdown

To nadal wykorzystuje dane wejściowe do obsługi zmiennych przesyłania formularzy, opierając się przede wszystkim na CSS.
Stworzone przez j0be
15 stycznia 2016 r.

Niestandardowe pole wyboru

Niestandardowe pole wyboru z jQuery.
Autor: Vijaya Kumar Vulchi
7 stycznia 2016 r.

Material Design Select

Material design select jQuery version.
Wykonane przez LukyVJ
3 stycznia 2016 r.

Zaznaczanie w poziomie

Prosty wybór w poziomie.
Opracował Bharani
23 listopada 2015 r.

O kodzie

Stylowe pole wyboru z CSS

Kreatywny sposób na stylizowanie listy rozwijanej przy użyciu wyłącznie CSS.

Zgodne przeglądarki: Chrome, Edge, Firefox, Opera, Safari

Responsywne: tak

Zależności: –

Wybór niestandardowy

Łatwy sposób dostosowywania wybranych danych wejściowych.
Autor: Christophe CORBALAN
10 września 2015 r.

Wybierz menu

Wybierz menu z kodami HTML, CSS i JavaScript.
Wykonał Pierre Laurent
23 czerwca 2015 r.

Wybór niestandardowy

Tak więc bardzo podstawowy wybór niestandardowy.
Wykonane przez Yusuf
1 maja 2015 r.

Wybór niestandardowy

Wybór niestandardowy z animacją.
Autor: Nikolay Talanov
5 września 2014 r.

Selektor

Dowód koncepcji, dla widżetu z możliwością wielokrotnego wyboru.
Wykonane przez Benjamina
23 maja 2014 r.

CSS3 C Lista rozwijana talii ard

Lista rozwijana talii kart HTML, CSS i JS.
Wykonane przez Tibora Katelbacha
23 lipca 2013 r.