10 darmowych fragmentów kodu CSS i JavaScript w polu wyboru

Domyślne pola wyboru HTML służyły nam dobrze od dziesięcioleci. Ale w epoce nowożytnej można śmiało powiedzieć, że są trochę… przestarzałe.

Projektanci mogą działać lepiej, a dzięki postępom w CSS łatwo dostosować pola wyboru. Nie wspominając o całym kodzie open source, który jest dostępny bezpłatnie online.

Stworzyłem kolekcję moich 10 najlepszych typów do ręcznie robionych stylów wybranych pudełek. Nie są one wydawane jako wtyczki, ale opierają się na szablonach do dostosowywania JavaScript i CSS. Ale wszystkie są równie łatwe w konfiguracji, a nawet w zmianie stylu do własnych celów.

1. Niestandardowe menu wyboru

Kolekcję rozpoczynamy od niestandardowego wyboru stylów menu Wallace'a Ericka.

Używa zarówno CSS do zmiany stylizacji, jak i JavaScript do konfiguracji UX menu. Zachowują się nieco inaczej niż standardowe zaznaczenia HTML i myślę, że są trochę przyjemniejsze w użyciu.

Możesz wybrać rozmiar i styl kolorów menu lub pracować z ustawieniami domyślnymi Wallace'a. Co najważniejsze, zawiera niestandardowy projekt pola do przesyłania, który, jeśli kiedykolwiek próbowałeś zmienić styl, wiesz, że jest trudny.

Doskonałe miejsce na rozpoczęcie, jeśli chcesz po prostu czyste, ale świeże menu, które działa.

2. Prosty wybór

Oto kolejne bardzo proste pole wyboru, które ma bardziej naturalnie wtapiać się w każdy układ.

Opiera się to na bardziej subtelnych kolorach z jednolitą czarno-białą kolorystyką. Ale używa również JavaScript do animowania menu wyboru w widoku i poza nim.

Działa poprzez kierowanie na ukryte pole wejściowe, które zachowuje się jak pole wyboru. W ten sposób nadal możesz pobierać dane z frontendu do swoich formularzy, ponieważ to rozwiązanie technicznie nie używa rzeczywistego elementu <select> .

Jeśli kompatybilność jest problemem, pomiń to. Ale muszę przyznać, że projekt jest wspaniały i byłby idealny do ruchu na komputerach stacjonarnych.

3. Nieprzyjemne menu rozwijane HTML

Jak sama nazwa wskazuje, ta paczka wybranych menu ma na celu po prostu nie do ssania. Wszystkie mają różne style i rozmiary z przyciskami, które można kliknąć, aby zmienić kolory na żądanie.

Oczywiście możesz usunąć tę funkcję we własnym układzie i trzymać się jednego schematu, który działa dla Twojej witryny. Ale ogólnie te wybrane menu działają jak normalne i są wspaniałe w użyciu.

Jeśli martwisz się o kompatybilność, rozważ pracę z tym szablonem.

Większość zmian ma charakter kosmetyczny, więc nie powinna mieć większego wpływu na zachowanie użytkownika.

4. Symbol zastępczy Wybierz

Rzeczywisty wygląd tego zastępczego menu wyboru jest wspaniały, ale projekt nie jest tutaj jedynym czynnikiem.

Deweloper James Nowland stworzył to menu w celu usunięcia wartości domyślnych z wyboru. Oznacza to, że zachowuje się bardziej jak symbol zastępczy w polach tekstowych, w których widać go, gdy pole jest puste, ale po ustawieniu wartości znika.

Jest w pełni zgodny i działa z rzeczywistym elementem wyboru HTML. Pole opcji jest domyślnie ukryte, gdy użytkownik dokona wyboru. W ten sposób nigdy nie zobaczysz tekstu „wybierz opcję” w dowolnym miejscu menu rozwijanego. Naprawdę kreatywne rozwiązanie!

5. Płaska konstrukcja

Estetyka często ma znaczenie w projektowaniu stron internetowych, a to płaskie menu wyboru jest świetnym przykładem.

Nadal działa jak typowy wybór, a część rozwijana nie została w ogóle zmieniona. Ale sama zmiana stylizacji samego wyboru ożywi stronę. Czuje się znacznie bardziej klasycznie niż brzydka domyślna przeglądarka.

Możesz nawet wziąć ten szablon i rozszerzyć go o własne płaskie style zastosowane w obszarze rozwijanym. Całkowicie twoja rozmowa!

Ale jako szablon początkowy jest to jeden z najprostszych wyborów dla dowolnego interfejsu.

6. Czysty CSS

Jestem wielkim fanem czystego CSS ponad JavaScript, ponieważ upraszcza cały proces projektowania. Nie jest to łatwe, ale istnieje tak wiele rozwiązań.

Jednym z moich ulubionych jest ten fragment zawierający nie tylko czyste menu wyboru CSS, ale także radia i pola wyboru.

Wszystkie wyglądają zjawiskowo i powinny komponować się z każdym rodzajem aranżacji. Masz pełną kontrolę nad wprowadzaniem zmian w CSS, a co najważniejsze, powinno działać również we wszystkich głównych przeglądarkach.

7. Stylizowane dostępne menu rozwijane

Oto jeden z bardziej stylizowanych przykładów tego, co można zrobić z wybranymi menu. Ten fragment stworzony przez Andy'ego Fitzsimona opiera się na JavaScript dla efektu rozwijanego i używa niestandardowego CSS dla gradientów i ikon strzałek.

Co ciekawe, to menu obsługuje również funkcję no-JS, więc będzie działać nawet po wyłączeniu JavaScript. Nazywa się to wdzięczną degradacją i jest najlepszym przyjacielem programisty w zakresie ułatwień dostępu.

Mimo to te wybrane menu uruchamiają gradienty starej szkoły Web 2.0, które mogą nie pasować do projektu na rok 2017 i późniejsze.

Ale to pokazuje, że możesz zabrać wybrane menu w dowolne miejsce przy odrobinie kreatywności. A te mogą działać zaskakująco dobrze, jeśli zhakujesz sobie drogę przez CSS, aby trochę je dostosować.

8. Menu ikon SVG

Domyślne menu wyboru mają ikonę strzałki z boku i niewiele więcej. Przy odrobinie magii SVG możesz przekształcić to w dowolną inną ikonę, którą chcesz.

To niestandardowe menu ma własny projekt ikony plusa, który działa z czystym plikiem SVG. Gdy klikniesz, aby rozwinąć menu, zostanie ono animowane w ikonę X do zamykania/ukrywania.

Nigdy wcześniej nie widziałem czegoś podobnego i pokazuje to, jak daleko posunęliśmy się w przekraczaniu granic przeglądarek internetowych.

Niestety to nie działa na natywnym elemencie wyboru HTML. Jest to zbiór elementów listy wewnątrz elementu div , więc za każdym razem, gdy zostanie wybrana wartość, musiałby kierować się na ukryte pole wejściowe.

Na szczęście ten proces jest naprawdę łatwy, więc jeśli chcesz, aby ten projekt pojawił się na swojej stronie, nie powinno to zająć dużo pracy, aby go uruchomić.

9. Wybierz Eksperyment pudełkowy

Oto eksperymentalny projekt, który naprawdę przykuł moją uwagę. Ekran demonstracyjny porównania pokazuje, jak różni się to od zwykłych menu wyboru i jak zmienia to wrażenia użytkownika.

Kiedy po raz pierwszy stukniesz/klikniesz, aby otworzyć menu, przesunie się ono w dół z pełnymi efektami animacji. Ale nie ukryje się, chyba że ponownie klikniesz menu, w przeciwieństwie do typowych menu wyboru, które ukrywają się po kliknięciu w innym miejscu na stronie.

Naprawdę dobry przykład czystego projektu z prostą animacją. Ale jeśli nie podoba Ci się brakująca funkcja „kliknij, aby ukryć”, ta może być przełomem.

10. Ciemne i jasne wybory

Jeśli kochasz również czysty CSS i chcesz mieć eleganckie zaznaczenia, wypróbuj to rozwiązanie i spróbuj użyć jednego z nich jako szablonu początkowego.

Obaj opierają się na gradientach CSS dla tła i mieszają menu rozwijane z niższym kolorem gradientu. To nie używa żadnej wtyczki JavaScript, więc możesz to osiągnąć za pomocą odrobiny CSS i odrobiny kreatywnego wysiłku.

Zauważ, że sam CSS jest dość skomplikowany, więc pomaga, jeśli znasz swój język. Ale na początek jest to jeden z najlepszych wyborów, jakie znajdziesz, a także pozostawia wiele miejsca na dostosowanie.