Customizable select: wreszcie można stylizować prawdziwy <select>

Wyjście poza domyślny element select oznaczało dotąd jeden z dwóch złych kompromisów: ciężkie biblioteki JavaScript albo mnóstwo elementów div, przy czym dostępność w obu przypadkach stawała się kłopotliwa.¹ Na WWDC 2026 zespół Safari pokazał wyjście z tego impasu: customizable select, czyli zestaw rozszerzeń HTML i CSS, dzięki którym istniejący już element <select> daje się w pełni stylizować, zachowując zarazem semantykę, nawigację klawiaturą i obsługę czytników ekranu, które już zapewnia. Począwszy od Safari 27 i Chrome 135 można od nowa ostylować przycisk, menu rozwijane, znacznik wyboru, a nawet strzałkę, a następnie umieścić wewnątrz opcji obrazy, filmy lub emoji.¹

TL;DR

• Customizable select stylizuje prawdziwy element <select> wyłącznie za pomocą HTML i CSS, zastępując biblioteki JavaScript i sterty div, po które programiści sięgali wcześniej. Dostępność rozpoczyna się w Safari 27 i Chrome 135.¹
• Włączenie odbywa się przez appearance: base-select, stosowane dwukrotnie: raz na samym select, aby otworzyć stylizację przycisku, i raz na ::picker(select), aby zrezygnować z natywnego menu rozwijanego.¹
• Wraz z tym pojawiają się nowe stylizowalne części: ::picker-icon zmienia styl strzałki za pomocą właściwości content oraz width, ::checkmark na elemencie option w ten sam sposób wymienia znacznik, a pseudoklasa :open stylizuje przycisk, gdy menu jest otwarte.¹
• Opcje przyjmują dowolny rodzaj treści: obrazy, filmy, emoji. Demo z sesji umieszcza w każdej opcji SVG i etykietę, a następnie układa całe menu rozwijane jako siatkę CSS przy użyciu grid-template i gap.¹
• Umieszczenie <button> jako pierwszego dziecka <select>, czego wcześniej HTML nie dopuszczał, zastępuje wbudowany przycisk; znajdujący się w nim element <selectedcontent> wyświetla bogatą treść wybranej opcji.²
• Progresywne ulepszanie otrzymuje się gratis: przeglądarki bez obsługi wracają do natywnego okienka, a semantyczny element select wszędzie zachowuje wbudowaną dostępność.¹

Od zupy z div z powrotem do semantycznego HTML

Tim, inżynier Safari, stosuje appearance: base-select w demie portfolio fotografa, zaczynając od 2:48.

Sesja wychodzi od tego, co <select> już robi dobrze. Element zapewnia podstawową dostępność od razu po wyjęciu z pudełka: nawigację klawiaturą między elementami option i solidne zachowanie z czytnikami ekranu, a wszystko bez zewnętrznych bibliotek.¹ Na platformach Apple natywne renderowanie to znany przycisk rozwijany, który pasuje do wszystkich innych kontrolek na platformie, co daje użytkownikom znajomy sposób poruszania się po nim.¹

Problemem zawsze był projekt graficzny. Wystarczy umieścić natywną kontrolkę na ostylowanej stronie, a wygląda nie na miejscu; nie chce się wtopić w otoczenie. Dotąd lekarstwem było całkowite porzucenie elementu na rzecz widżetu JavaScript albo sterty div i ręczne odtwarzanie dostępności. Customizable select zachowuje element i oddaje stylizację w ręce twórcy, w trzech etapach, które sesja omawia na przykładzie prawdziwego portfolio fotografa: przycisk, menu rozwijane, a na końcu treść wykraczająca poza zwykły tekst.¹

Stylizowanie przycisku: base-select, ::picker-icon i :open

Przycisk to ta część select, którą klika się, aby pokazać menu, a pierwszym krokiem jest pojedyncza deklaracja:

select {
  appearance: base-select;
}

appearance: base-select zamienia natywne renderowanie na mniejszy zestaw stylów bazowych, które można zmieniać.¹ Efekt pojawia się natychmiast dzięki dziedziczeniu: strona demonstracyjna ustawia font-family: Gill Sans na body, a przycisk select dziedziczy teraz czcionkę body, pasując do etykiety obok.¹ Stąd tło, obramowanie i padding dostosowuje się jak w każdym innym elemencie.

Przycisk dopełniają dwa nowe punkty zaczepienia. Strzałka otrzymuje własny selektor ::picker-icon, który przyjmuje właściwość content na zastępczy glif oraz width do ustalenia jego rozmiaru. Pseudoklasa :open nadaje przyciskowi inny styl, gdy menu rozwijane jest otwarte:

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

Werdykt sesji co do efektu: select pasujący do reszty strony w zaledwie kilku wierszach CSS.¹

Stylizowanie menu rozwijanego: ::picker(select) i ::checkmark

Menu ma własne stylizowalne części. Samo menu rozwijane adresuje się za pomocą ::picker(select) na elemencie select, a znacznik za pomocą ::checkmark na elemencie option.¹ Rezygnacja z natywnego menu wymaga appearance: base-select po raz drugi, tym razem na pickerze:

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

Mając czystą kartę, demo rozplanowuje odstępy za pomocą padding i margin, a następnie zajmuje się obramowaniem i box-shadow na menu rozwijanym.¹ Do wyróżnienia bieżącego wyboru służy istniejący już selektor :checked, a nie cokolwiek nowego: pogrubić zaznaczoną opcję, wyszarzyć pozostałe.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark działa dokładnie tak samo jak ::picker-icon: ustawia się content i width, a domyślny znacznik staje się dowolnym glifem pasującym do projektu.¹

Bogata treść w opcjach, ułożona jako siatka

Większa zmiana dotyczy tego, co trafia do wnętrza <option>. Sesja mówi wprost: działa każdy rodzaj treści, obrazy, filmy, emoji, cokolwiek się chce.¹ Demo buduje przeglądarkę kategorii dla najpopularniejszych tematów fotografa, z symbolem SVG i etykietą wewnątrz każdej opcji:

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

Warto zwrócić uwagę na pusty atrybut alt. Tim celowo pozostawia tekst alternatywny obrazu pusty, ponieważ w przeciwnym razie czytniki ekranu odczytałyby etykietę „Flowers” dwukrotnie.¹ Drobny szczegół o realnym skutku: bogate opcje pozostają tak samo użyteczne z technologiami wspomagającymi jak zwykłe.

Po usunięciu domyślnego znacznika wyboru demo wyróżnia wybraną opcję za pomocą selektora checked oraz zmian koloru.¹ Pozostaje jeden problem: opcje z symbolem i etykietą sprawiają, że menu rozwijane robi się bardzo długie. Lekarstwem jest ponowne użycie CSS, który już istnieje, bo picker jest teraz zwykłym celem stylizacji. Układ siatki przebudowuje całe menu:

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template definiuje liczbę wierszy i kolumn, a gap definiuje odstępy między komórkami siatki, dzięki czemu menu rozwijane układa się w uporządkowaną siatkę kategorii.¹ Sesja kończy się efektowną klamrą na ten sam temat: radialnym selektorem koloru, zbudowanym w całości za pomocą customizable select.¹

Wymienny przycisk i selectedcontent

W przeglądarce kategorii pozostaje jedna luka: symbole SVG żyją w opcjach, ale przycisk pokazujący bieżący wybór wyświetla wyłącznie tekst.¹ Customizable select zamyka tę lukę, pozwalając zastąpić wbudowany przycisk poprzez umieszczenie elementu <button> jako pierwszego dziecka <select>. Umieszczenie przycisku wewnątrz select nie było wcześniej w HTML dozwolone; teraz przyjmuje on niestandardową treść, taką jak etykiety, lub jak element stworzony dokładnie do tego zadania.¹

Ogłoszenie bety Safari 27 od WebKit nazywa ten element: <selectedcontent>. Umieszczony w przycisku będącym pierwszym dzieckiem select, wyświetla treść aktualnie wybranej opcji i można go stylizować bezpośrednio.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

Element odzwierciedla dowolną bogatą treść należącą do wybranej opcji, jak SVG obok etykiety „Everything” w demie, dzięki czemu przycisk pokazuje wreszcie ten sam język wizualny co menu, które otwiera.¹²

Progresywne ulepszanie jest wbudowane

Ostatni krok w sesji to ten, który zespoły pomijają na własne ryzyko: sprawdzenie projektu w przeglądarkach, które nie obsługują customizable select. Odpowiedź jest nudna w najlepszym sensie. Wkracza progresywne ulepszanie, kontrolka pozostaje użyteczna, a klienci otrzymują natywne okienko.¹ Ponowne wykorzystanie elementu select oznacza, że scenariusz awaryjny już istnieje, a ponieważ <select> jest elementem semantycznym, wbudowane funkcje dostępności przetrwają w każdej przeglądarce.¹

Dostępność jest konkretna: Safari 27 i Chrome 135. Aby wypróbować te funkcje już teraz, należy pobrać Safari Technology Preview lub Safari Beta.¹ Końcowe wskazówki sesji są praktyczne: sprawdź demo na webkit.org, ostyluj coś prostego na własnej stronie, przetestuj w przeglądarkach bez obsługi oraz z narzędziami wspomagającymi i przeczytaj materiały WebKit o dobrych praktykach, aby interfejs działał dla wszystkich.¹

Najważniejsze wnioski

Dla programistów frontendu: - Włącz funkcję przez appearance: base-select na elemencie select dla przycisku, a następnie ponownie na ::picker(select) dla menu rozwijanego; potem ostyluj tło, obramowanie, padding, odstępy i box-shadow jak w każdym innym elemencie.¹ - Wymień strzałkę za pomocą ::picker-icon, a znacznik za pomocą ::checkmark, oba przez content oraz width; ostyluj stan otwarcia za pomocą :open; wyróżnij wybór istniejącym już selektorem :checked.¹ - Umieść prawdziwy HTML wewnątrz <option> (obrazy, filmy, emoji) i przebuduj menu istniejącym CSS, jak siatka grid-template plus gap; zastąp wbudowany przycisk elementem <button> będącym pierwszym dzieckiem, zawierającym <selectedcontent>.¹²

Dla zespołów dbających o dostępność: - Semantyczny select zachowuje nawigację klawiaturą i obsługę czytników ekranu bez zewnętrznych bibliotek, zarówno w przeglądarkach obsługiwanych, jak i nieobsługiwanych.¹ - Gdy opcje niosą zarówno obraz, jak i etykietę tekstową, pozostaw tekst alternatywny obrazu pusty, aby czytniki ekranu nie odczytywały etykiety dwukrotnie.¹ - Przetestuj w przeglądarkach pozbawionych obsługi oraz z narzędziami wspomagającymi przed wdrożeniem, zgodnie z listą kontrolną samej sesji.¹

Dla liderów technicznych planujących wdrożenie: - Traktuj customizable select jako progresywne ulepszanie: Safari 27 i Chrome 135 dostają niestandardowy projekt, wszyscy pozostali dostają natywne okienko, a żaden awaryjny mechanizm JavaScript nie jest wymagany.¹ - Oceń go już teraz w Safari Technology Preview lub Safari Beta i zważ go względem biblioteki menu rozwijanego, która obecnie zalega w twoim bundle.¹

FAQ

Czym jest customizable select?

Customizable select to zestaw możliwości HTML i CSS, przedstawiony przez zespół Safari na WWDC 2026 i dostępny od Safari 27 oraz Chrome 135, który czyni istniejący już element <select> w pełni konfigurowalnym. Przycisk, menu rozwijane, strzałkę i znacznik wyboru stylizuje się za pomocą CSS, a wewnątrz opcji umieszcza się bogatą treść, zachowując przy tym wbudowaną dostępność elementu.¹

Jak włączyć customizable select?

Należy zastosować appearance: base-select w dwóch miejscach: na samym elemencie select, co zastępuje natywne renderowanie przycisku mniejszym zestawem stylów bazowych, oraz na ::picker(select), co sprawia, że menu rozwijane rezygnuje z natywnego renderowania, dzięki czemu można je dowolnie stylizować.¹

Czy mogę umieścić obrazy lub inny HTML wewnątrz elementów option?

Tak. Sesja stwierdza, że wewnątrz opcji można umieścić każdy rodzaj treści: obrazy, filmy, emoji. Demo używa SVG i etykiety tekstowej na opcję, z pustym tekstem alternatywnym obrazu, aby czytniki ekranu odczytywały etykietę tylko raz, i układa menu jako siatkę CSS przy użyciu grid-template oraz gap.¹

Czym jest element selectedcontent?

<selectedcontent> to element, który wyświetla bogatą treść aktualnie wybranej opcji wewnątrz przycisku select. Customizable select dopuszcza <button> jako pierwsze dziecko <select>, czego wcześniej HTML nie pozwalał; umieszczenie <selectedcontent> w tym przycisku odzwierciedla treść wybranej opcji, na przykład SVG obok jej etykiety, a sam element można stylizować bezpośrednio.¹²

Co dzieje się w przeglądarkach, które nie obsługują customizable select?

Kontrolka degraduje się płynnie. Progresywne ulepszanie oznacza, że select pozostaje w pełni użyteczny, a klienci otrzymują natywne okienko, a ponieważ <select> jest elementem semantycznym, wbudowane funkcje dostępności pozostają. Sesja zaleca testowanie w przeglądarkach bez obsługi oraz z narzędziami wspomagającymi przed wdrożeniem.¹

Customizable select usuwa zależność w taki sam sposób, w jaki CSS Grid Lanes robi to dla układów typu masonry, a to zestawienie jest celowe: sama sesja 315 kończy się skierowaniem widzów do sesji Grid Lanes, a strona demonstracyjna używa obu funkcji razem.¹ Apple wciąż rozszerza to, co potrafią zwykłe elementy HTML, tą samą drogą, którą omówiono w elemencie model w HTML na platformach Apple, a każda biblioteka menu rozwijanego, której już nie dostarczasz, wzmacnia argumentację manifestu no-build. Pełny węzeł serii to seria Apple Ecosystem.

References