Element <select> można teraz dostosowywać za pomocą arkusza CSS

Adam Argyle

Data publikacji: 24 marca 2025 r.

Od Chrome 135 programiści i projektanci stron internetowych mogą wreszcie korzystać z dostępnego, standardowego i stylizowanego za pomocą CSS elementu <select> w internecie. Prace nad tym rozwiązaniem trwały wiele lat i wymagały wielu godzin pracy inżynierów oraz współpracy przy tworzeniu specyfikacji. W rezultacie powstał niezwykle bogaty i zaawansowany komponent, który nie będzie powodować problemów w starszych przeglądarkach.

Oto film przedstawiający dostosowane wybory z wykorzystaniem tych nowych funkcji:

Prezentacje Uny, Brecht i Adama.

Jeśli śledzisz nasze działania, zauważysz, że od czasu prośby Uny o opinię społeczności zmieniło się kilka nazw specyfikacji i funkcji. Jeśli jednak pracujesz na podstawie tego posta i interesuje Cię, co się zmieniło, Una również Ci pomoże.

Na MDN znajdziesz też nową dokumentację dotyczącą dostosowywania elementu select, która zawiera wiele szczegółów.

Poznaj appearance: base-select

Nowa właściwość CSS appearance: base-select, która wprowadza element <select> w nowy, konfigurowalny i stylizowany stan, powszechnie określany jako style „podstawowe”:

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

Użycie base-select odblokowuje szereg nowych funkcji i zachowań:

  • Zmienia parser HTML przeglądarki dla treści w elemencie <select>.
  • Zmienia renderowane elementy wewnętrzne elementu <select>.
  • Udostępnia nowe wewnętrzne części i stany elementu <select>.
  • Nowy, minimalistyczny wygląd zoptymalizowany pod kątem dostosowywania.
  • Wyświetlane opcje znajdują się na wierzchniej warstwie, podobnie jak wyskakujące okienko.
  • Wyświetlane opcje są umieszczone w pozycji anchor().

Korzystanie z base-select powoduje utratę wielu funkcji i zachowań:

  • Symbol <select> nie jest renderowany poza panelem przeglądarki.
  • Nie uruchamia wbudowanych komponentów mobilnego systemu operacyjnego.
  • Element <select> przestaje przyjmować szerokość najdłuższego elementu <option>.

<select> może teraz zawierać bogate treści HTML

Zanim można było dostosować <select>, przeglądarka ignorowała elementy takie jak obraz czy SVG umieszczone w elemencie <option>.

Rozważmy ten kod HTML. Przeglądarka odczyta go tak, jak został napisany:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Użyty DOM nie będzie jednak zawierać znaku <svg>:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

Poniżej (od lewej do prawej) widzisz, jak przeglądarki Chrome, Safari i Firefox renderują powyższy kod HTML. Jeśli przeglądarka obsługuje appearance: base-select, w opcji pojawi się plik SVG. W przeciwnym razie nie będzie on widoczny.

Przeglądarki Chrome, Safari i Firefox wyświetlają element select z SVG w środku. Chrome wyświetla obrazy, a Safari i Firefox renderują stronę tak, jakby nie było na niej obrazów.
Wypróbuj w tym Codepenie.

Ze względu na zmiany w parserze istnieje ryzyko, że dostosowywane elementy select będą powodować problemy w działaniu istniejących witryn. Chrome ma funkcje eksperymentu Finch, które można wyłączyć w sytuacji awaryjnej. Jeśli wszystko pójdzie dobrze, eksperyment zakończy się, a kod zostanie na stałe włączony do źródła.

Możliwość pełnego dostosowania

Każdy element base-select można wymieniać, dostosowywać i animować. Oto wersja demonstracyjna, która wykorzystuje wszystkie nowe funkcje do tworzenia rozpoznawalnych i znaczących doświadczeń związanych z wyborem.

Wyświetlane są 4 różne prezentacje wybranego elementu. Pierwszy ma zieloną kropkę wskaźnika stanu z etykietą „Włączone”. Na następnym ekranie obok opcji pojawią się awatary. Trzeci to selektor przestrzeni kolorów z etykietą niestandardową wbudowaną w element select. Ostatnia opcja umożliwia wybór wersji roboczej lub opublikowanej.
Wypróbuj w tym Codepenie.

Więcej przykładów znajdziesz w sekcji z materiałami na końcu tego posta.

Niezmienione interfejsy JavaScript

Nie ma żadnego ryzyka związanego z dotychczasowymi interakcjami JavaScript z elementem <select>.

Jeśli jednak zaczniesz dodawać do elementów <option> bogaty kod HTML, przetestuj wybrane wartości, ponieważ przeglądarka nadal analizuje i ignoruje obrazy i SVG. Zmieniła się jednak logika określania wybranego ciągu tekstowego treści i w zależności od tego, co masz w opcjach, może być konieczne wprowadzenie zmian.

Jeśli używasz atrybutu value w elemencie <option>, nie musisz się niczego obawiać.

Zasoby

Chrome jako pierwsza wprowadziła base-select, ale wszystkie przeglądarki brały udział w opracowywaniu specyfikacji. Wciąż jest wiele „podstawowych” elementów, które trzeba ukończyć. To dopiero początek.

Będziemy dodawać kolejne wskazówki, przykłady i zasoby dotyczące dostosowywania wybranych elementów. Do tego czasu więcej informacji znajdziesz pod tymi linkami.

Specjalne podziękowania dla wszystkich, którzy przyczynili się do tego sukcesu.