Wszyscy wiemy, że lista rozwijana <select> to część formularza sprawiająca chyba najwięcej problemów w próbach dostosowania jej do naszych potrzeb. W wyglądzie domyślnym jest po prostu brzydka, a jej stylizacja z poziomu CSS jest bardzo ograniczona. Ponadto w różnych przeglądarkach, i na różnych systemach, element ten wygląda zupełnie inaczej! Warto by więc poprawić wygląd naszej aplikacji poprzez zmianę jego wyglądu.

Tu można sprawdzić, jak wygląda <select> w różnych systemach.

element select w różnych systemach

Tak wygląda element select zależnie od systemu operacyjnego

Cały ten natłok problemów z tym znacznikiem powoduje, że wiele osób stara się ograniczyć używanie tego elementu na swoich stronach, nie mogąc poradzić sobie z jego dostosowaniem. Kiedy więc ktoś chce się mocować z tym znacznikiem, to ma problem, ze znalezieniem na ten temat jakichś konkretnych informacji. Postanowiłem więc w tym artykule opisać rozwiązanie powyższego problemu.

Element <select>

Cóż, do lekcji będzie nam potrzebny jakiś przykład, skorzystam więc z formularza wyboru języka, ponieważ dość często element <select> jest używany właśnie w ten sposób.

 

Mamy więc 3 opcje językowe, a nasz <select> posiada id=”lang”. Jak wspomniałem wyżej, zależnie od przeglądarek i systemów operacyjnych, przybierze on odmienną formę. Spróbujmy nadać mu jednak wygląd niestandardowy. Jak to osiągniemy? Jeśli zatrzymamy bazowy element <select> nie mamy takiej możliwości. Poza prostymi zmianami tła, czcionki i koloru czcionki, nie mamy faktycznej kontroli nad wyglądem tego elementu. Nie ma możliwości zmiany chociażby ikony strzałki w elemencie.

Niemniej, możemy zaimitować świetną funkcjonalność elementu <select> innymi kontrolkami formularza, bez utraty użyteczności czy dostępu do elementów listy. Aby to osiągnąć, musimy zrozumieć naturę listy rozwijanej.

Lista rozwijana to tak naprawdę po prostu lista nieuporządkowana, w której możemy zaznaczyć jeden element i sprawić, by tylko on się wyświetlał w przeglądarce. Czyli w istocie jest to element <ul> tylko na sterydach. Idąc dalej tym tokiem myślenia, można by spróbować zamienić nasze elementy listy rozwijanej listami <ul>, a wtedy stylizacja elementu select, zamieni się w edycję wyglądu listy <ul>. Musielibyśmy tylko zadbać o to, by lista nieuporządkowana nie utraciła swojej funkcjonalności. Kłopot, nie? Pytanie, które nasuwa się nam teraz na myśl, to jak dodać odpowiednią funkcjonalność do listy nieuporządkowanej? Czyli, jak dodać możliwość wyboru konkretnego elementu listy w formularzu, skoro nie mamy już kontrolki formularza?

Z pomocą przychodzi nam tu kurs Java Script.

Gdy wiemy już, co chcemy osiągnąć, pozostaje nam napisać krótką funkcję, która zamieni nam elementy <select> na <ul> i doda do listy nieuporządkowanej funkcjonalność listy rozwijanej. Osiągniemy to przy pomocy Java Script i sprytnego wykorzystania stylów CSS. Pomyślmy, co posiada lista rozwijana, czego nie ma <ul>:

  • Możemy kliknąć na listę, by ją rozwinąć.
  • Możemy wybrać opcję, która ma być aktywna i tym samym zwinąć listę
  • Wyświetla domyślną wartość, kiedy nic nie jest zaznaczone
  • Wyświetla zaznaczoną wartość, kiedy coś jest zaznaczone

Z tak przygotowanym planem działania, możemy etapami przygotować kod, który rozwiąże każdy z naszych problemów.

1. Budowanie listy

Na początku, musimy stworzyć funkcję, która pobierze każdą z wartości naszej listy rozwijanej, i zamieni ją na listę <ul>. Osiągniemy to odpalając poniższy skrypt JS. Starałem się umieszczać w kodzie przejrzyste komentarze:

Teraz możemy wywołać tę funkcję drugim fragmentem kodu:

2. Zamiana funkcjonalności.

Ten kod dodaje nam do strony stworzone z każdego znajdującego się na niej elementu <select> listy nieuporządkowane. „No dobrze, ale nadal nie ma możliwości wybrania poszczególnego elementu”. Ten problem możemy rozwiązać poprzez dodanie dodatkowej pętli przed stworzeniem elementów <li> z naszych opcji. Funkcja musi sprawdzić, czy dana opcja jest zaznaczona, i przypisać jej klasę: „selected”.

 

3. Edycja wyglądu SELECT

W tym momencie otrzymaliśmy listę, która rozpoznaje zaznaczoną opcję 😉 . Możemy teraz dodać style, dość sprytnie je dostosowując, tak żeby nasza lista wyświetlała się tak, jak nam wygodnie 😉 Spróbuję dostosować listę do obrazka powyżej.

Ten fragment stylów CSS pozwala nam dostosować widok wyświetlanej opcji i całej listy. Niestety nadal nie mamy możliwości zaznaczania konkretnej opcji. Aby to zmienić, musimy troszeczkę bardziej pogłówkować nad naszym kodem. Najpierw dodajmy style, które pozwolą nam na rozwijanie listy po najechaniu na nią kursorem myszki oraz zmianę koloru konkretnej opcji także po najechaniu na nią kursorem.

Jak widzicie, jako background listy ustawiłem obrazek strzałki, dokładnie taką, jaka przyszła mi do głowy. Od tego momentu zostały nam do zrobienia tylko dwie rzeczy: dodanie skryptu umożliwiającego zaznaczenie naszej opcji oraz ukrycie zastąpionego elementu <seclect>. Oto kod, który da nam możliwość zapamiętania, która opcja jest zaznaczona:

 

Teraz należy wywołać powyższe funkcje w odpowiednim momencie – czyli wtedy, kiedy nadajemy klasę ‚selected’ dla zaznaczonej pozycji listy.

Koniec. Nasz element został zamieniony w listę rozwijaną, której wyglądem możemy zarządzać jak nam się żywnie podoba 😉 . Wypadałoby jeszcze usunąć z formularza zamieniony <select>, jednak nie jest to żaden większy problem, a już szczególnie po tym, przez co udało nam się przebrnąć. Tutaj jest fragmencik potrzebnego skrytpu:

I CSS:  .replaced{ display:none; }

To by było na tyle na dzisiaj 😉 . Stylizacja elementu select została ukończona. Mam nadzieję że się podobało i że Ci się ta wiedza przyda. Proszę, żebyś napisał mi w komentarzu swoją opinię na ten temat, jeśli oczywiście po tym całym kodzeniu możesz jeszcze patrzeć na monitor:P

<< Komentarze  Wprowadzenie >>

Pin It on Pinterest

Share This
Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

FreshMail.pl