0Pricing
HTML Academy · Lekcja

Element selectlist

Dostosowywanie rozwijanych kontrolek za pomocą proponowanego elementu selectlist

Element selectlist to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Ograniczenie istniejące od lat

Element <select> jest jednym z niewielu kontrolek formularza, których wyglądu nie można stylować. Każda reguła CSS zastosowana do tego elementu (własne obramowania, czcionki, style opcji) jest ignorowana przez przeglądarkę, co doprowadziło do powstania tysięcy bibliotek „własnych dropdownów” powielających natywne zachowanie tylko po to, aby umożliwić stylowanie opcji.

Czym jest selectlist

<selectlist> (spotykany również jako <selectmenu>) to natywny element HTML zaprojektowany jako możliwy do stylowania zamiennik elementu <select>. Wykorzystuje ten sam model pojęciowy — przycisk wyzwalający i listę opcji — ale każdą jego część można dostosować za pomocą CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Elementy, które można stylować

selectlist udostępnia przycisk (wyzwalacz w stanie zamknięcia), listbox (otwartą listę rozwijaną) oraz opcje. Pseudoelementy CSS (::part(button), ::part(listbox)) pozwalają stylować każdy z tych elementów bez zmiany natywnego zachowania.

Dostosowywanie opcji

Opcje wewnątrz selectlist mogą zawierać dowolną treść — ikony, opisy i własne układy — a nie tylko tekst. Przeglądarka nadal obsługuje logikę wyboru, nawigację klawiaturą i zarządzanie fokusem, a wygląd pozostaje w pełni pod Państwa kontrolą.

Zachowanie wbudowane pozostaje dostępne

selectlist zachowuje wszystkie zalety elementu <select>: nawigację klawiaturą (strzałki, wyszukiwanie po wpisywanym tekście), komunikaty dla czytników ekranu, udział w wysyłaniu formularza i zarządzanie fokusem. Otrzymują Państwo dostępne zachowanie oraz możliwość stylowania interfejsu.

Własny przycisk

Udostępnij slot dla wyzwalacza: <button slot="button">Choose fruit <svg>...</svg></button>. Przycisk można zaprojektować samodzielnie — zastąpić natywny trójkąt własną ikoną, dodać etykiety i zmienić kolory. Przeglądarka nadal obsługuje otwieranie i zamykanie.

Udział w formularzu

selectlist uczestniczy w wysyłaniu formularza tak samo jak select: ma atrybut name i wartość value oraz jest wysyłany razem z formularzem. Obsługa po stronie serwera jest identyczna. Na poziomie znaczników jest to w większości przypadków bezpośredni zamiennik select.

Obsługa przeglądarek

selectlist to funkcja na wczesnym etapie rozwoju. W 2026 roku jest dostępna w przeglądarkach opartych na Chromium za flagami lub w ograniczonej formie. Firefox i Safari jeszcze jej nie obsługują. W środowisku produkcyjnym dla nieobsługiwanych przeglądarek trzeba zapewnić powrót do zwykłego elementu <select>.

Trudność utworzenia polyfillu

Utworzenie polyfillu w pełni dostępnego własnego dropdownu, który zachowuje się tak samo jak natywny, jest trudne — obejmuje pułapki fokusu, nawigację klawiaturą, integrację z czytnikami ekranu i udział w wysyłaniu formularza. Biblioteki takie jak Downshift, Combobox czy react-aria realizują tę obsługę za pomocą tysięcy wierszy kodu. selectlist zastępuje to wszystko jednym elementem.

Kiedy wdrożyć

W przypadku aplikacji wewnętrznych lub wdrożeń wyłącznie w Chromium element selectlist pozwala już dziś znacznie ograniczyć ilość kodu. W publicznych witrynach kierowanych do szerokiego grona odbiorców należy poczekać na obsługę w Firefoksie i Safari albo użyć biblioteki pośredniczącej, która korzysta z selectlist tam, gdzie jest on obsługiwany, a w pozostałych miejscach używa niestandardowej listy rozwijanej React/Vue.

Plan zastępowania

Gdy selectlist będzie dostępny wszędzie, można spodziewać się, że wiele bibliotek niestandardowych list rozwijanych zostanie wycofanych albo stanie się cienkimi nakładkami na natywny element. Warto śledzić proces standaryzacji — API przechodziło już zmiany i może nadal ewoluować przed ostatecznym ustandaryzowaniem.

Wpływ na projektowanie

Projektanci mogą teraz tworzyć listy rozwijane dopracowane co do piksela, bez zastrzeżenia: „Oto projekt, ale lista rozwijana będzie wyglądać inaczej w przeglądarce”. selectlist eliminuje jedną z najdłużej istniejących wizualnych niespójności między makietami projektów a dostarczanym kodem HTML.

Sprawdzenie wiedzy

Dlaczego element selectlist ma znaczenie — jakie ograniczenie natywnego elementu