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

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Adam Argyle

Data publikacji: 24 marca 2025 r.

Od wersji 135 Chrome deweloperzy i projektanci stron internetowych mogą w końcu korzystać z dostępnego, ustandaryzowanego i stylizowanego za pomocą CSS elementu <select>. To efekt wielu lat pracy inżynierów i współpracy nad specyfikacją. W rezultacie powstał niezwykle bogaty i wydajny komponent, który nie powoduje problemów w starszych przeglądarkach.

Oto film pokazujący spersonalizowane sekcje z wykorzystaniem tych nowych funkcji:

Jeśli śledzisz nasze działania, zauważysz, że od czasu prośby o opinię społeczności Una wprowadziła kilka zmian w specyfikacji i funkcjach. Na szczęście, jeśli korzystasz z tego wpisu i ciekawi Cię, co się zmieniło, Una też Ci pomoże.

Dostępna jest też nowa dokumentacja na MDN dotycząca funkcji dostosowania, która zawiera wiele szczegółowych informacji.

Poznaj appearance: base-select

nowa właściwość CSS appearance: base-select, która wprowadza element <select> w nowy stan, który można konfigurować i stylizować, i który jest powszechnie nazywany stylem „podstawowym”:

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

Korzystanie z base-select odblokowuje szereg nowych funkcji i zachowań:

• Zmienia parser HTML przeglądarki w przypadku zawartości w elementach <select>.
• Zmiana wewnętrznych elementów renderowania w <select>.
• Wyświetla nowe wewnętrzne części i stany <select>.
• Nowy minimalistyczny wygląd, zoptymalizowany pod kątem dostosowywania.
• Wyświetlane opcje znajdują się w górnej warstwie, jak w wyskakującym okienku.
• Wyświetlone opcje z anchor().

Korzystając z funkcji base-select, tracisz dostęp do wielu funkcji i zachowań:

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

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

Zanim umożliwiliśmy dostosowywanie elementu <select>, jeśli do elementu <option> dodawano obraz lub plik SVG, przeglądarka ignorowała te elementy.

Weź pod uwagę ten kod HTML. Przeglądarka odczytuje go tak, jak go napisałeś:

<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żywany DOM nie będzie jednak zawierać <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>

Oto (od lewej do prawej) renderowanie kodu HTML przez Chrome, Safari i Firefox. Jeśli przeglądarka obsługuje format appearance: base-select, opcja SVG będzie widoczna. W przeciwnym razie nie będzie widoczna.

Zmiany w parsowaniu mogą spowodować nieprawidłowe działanie dotychczasowych stron internetowych z funkcją niestandardowego wyboru. Chrome ma funkcje, które są częścią eksperymentu Finch, na wypadek gdyby trzeba było je awaryjnie wyłączyć. Jeśli wszystko pójdzie dobrze, eksperyment zostanie zakończony, a kod zostanie trwale dodany do źródła.

w pełni dostosowywalny.

Każdy element base-select można zamienić, dostosować i animować. Oto prezentacja, która wykorzystuje wszystkie nowe funkcje do tworzenia rozpoznawalnych i wartościowych doświadczeń.

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

Niezmienione interfejsy JavaScript

Dotychczasowe interakcje JavaScript z elementem <select> nie są zagrożone.

Jeśli jednak zaczniesz dodawać bogaty kod HTML do elementów <option>, przetestuj wybrane wartości, ponieważ przeglądarka nadal analizuje i ignoruje obrazy oraz SVG. Zmieniliśmy jednak logikę określania wybranego ciągu treści. W zależności od tego, jakie masz opcje, może być konieczne wprowadzenie zmian.

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

Zasoby

Chrome jako pierwsza wdroży base-select, ale wszystkie przeglądarki brały udział w tworzeniu specyfikacji, a jeszcze wiele elementów „podstawowych” wymaga dopracowania. To dopiero początek.

Bądź na bieżąco, ponieważ będziemy dodawać wskazówki, przykłady i zasoby dotyczące dostosowywania wybranych elementów. Do tego czasu więcej informacji znajdziesz w linkach poniżej.

• Standardy internetowe
  • Otwórz UI-Select
  • Prośba o przechwycenie specyfikacji HTML
  • Intencja dostawy
  • MDN
• Chrome
  • Prośba o komentarze i świetny film Una
  • Wyniki prośby o komentarz
  • Używanie aplikacji <hr> w <select>
  • Una omawia części
  • Kolekcja Una w Codepen
• Społeczność
  • Kolekcja Codepen Brechta De Ruyte
  • CSS Tricks on native versus custom selects
  • Otwórz interfejs Props UI-<select>
  • Przykład niestandardowego wyboru z animacjami przejścia

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