Od lat stylizacja elementów sterujących formularzem, takich jak element <select>, była największym problemem dla programistów, dlatego pracowaliśmy nad rozwiązaniem. Ta praca jest skomplikowana i zajmuje dużo czasu, ale jesteśmy już bardzo blisko udostępnienia tej funkcji. Dostosowywalna wersja elementu select jest oficjalnie na etapie 2 w WHATWG, cieszy się dużym zainteresowaniem w różnych przeglądarkach, a prototyp można przetestować w Chrome Canary 130.
Wypróbuj tę funkcję i podziel się z nami swoją opinią
Sprawdź, czy zainstalowana przez Ciebie wersja Chrome Canary jest zaktualizowana do wersji 130 i czy masz włączoną flagę eksperymentalnej funkcji platformy internetowej. Aby włączyć tę flagę, otwórz chrome://flags na pasku adresu i włącz #experimental-web-platform-features. Po ich wykonaniu w tym poście powinny być już widoczne wersje demonstracyjne Codepen. Możesz też przejrzeć tę kolekcję Codepen, aby zobaczyć je wszystkie w jednym miejscu.
Aby przesłać opinię na temat tej funkcji, użyj tego formularza. To zajmie tylko 3 minuty.
Przyjrzyjmy się funkcjom interfejsu Select API, który opiera się na dotychczasowym tagu HTML select.
Włączanie nowej wersji <select>
Aby wyrazić zgodę na nowy sposób, użyj właściwości CSS appearance zarówno w przycisku wyboru na stronie, jak i w selektorze wyboru. Aby włączyć, ustaw appearance: base-select w elemencie <select> i w elemencie ::picker(select).
::picker(select) to nowy pseudoelement dostarczony przez użytkownika, który ma zastosowanie tylko do elementów <select>, które zostały włączone za pomocą appearance: base-select. Ten pseudoelement selektora to okienko wyskakujące uruchamiane przez naciśnięcie podstawowego przycisku wyboru. Możesz włączyć obie opcje, jak pokazano w tym kodzie:
select,
::picker(select) {
appearance: base-select;
}
Możesz włączyć tylko przycisk na stronie, ale nie możesz włączyć tylko wyskakującego okienka selektora bez włączenia przycisku na stronie. ::picker(select) jest tworzony tylko wtedy, gdy appearance: base-select zostanie zastosowany w przypadku <select>.
Teraz możesz dostosować wybrany element. Nowa opcja wyboru z możliwością dostosowania zawiera kilka domyślnych stylów, które wyglądają tak samo w różnych przeglądarkach i systemach operacyjnych. Tak wygląda domyślne niestandardowe ustawienie w porównaniu z dotychczasowym wyborem w Chrome na urządzeniach z macOS:
Podział na części
Gdy znajdziesz się w nowym trybie wyboru z możliwością dostosowania, nowe elementy, do których masz teraz dostęp, to:selectedoption: odzwierciedla wewnętrzny kod HTML opcji, która jest obecnie wybrana.
– option::before: zawiera znacznik wyboru wskazujący, że wybrana opcja jest domyślną opcją ułatwień dostępu (może ulec zmianie).
– ::picker(select): wyskakujące okienko zawierające całą zawartość spoza obszaru button w elemencie wyboru, który można dostosować.
Możesz sformatować dowolną część zaznaczenia. Możesz na przykład dodać dowolne treści nieinteraktywne w elementach <option>, określić styl przycisku na stronie, który otwiera menu wyboru, i określić styl listy opcji (::picker(select)).
Możesz też dostosować styl elementu button (wskaźnik strzałki „wprowadź)” oraz dodać dowolną treść w obrębie dowolnego elementu i otaczającym go. Oprócz dodawania treści możesz też ukrywać te nowe elementy i style domyślne. Jeśli np. nie chcesz, aby w pseudoelemencie ::before opcji pojawiała się znacznik wyboru, użyj tego kodu CSS.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Chociaż do wyboru może być nieograniczona liczba elementów, przeglądarka grupuje wszystko, co nie znajduje się w elemencie <button>, do pseudoelementu ::picker(select), który działa jak wyskakujące okienko zakotwiczone w przycisku. Ta funkcja <button> przełącza element ::picker(select). Opcje i inne elementy bezpośrednio wewnątrz elementu select zostaną przeniesione do elementu ::picker(select). Możesz też podać własny element opakowujący na potrzeby stylizacji. Ten otoczka zostanie również umieszczony wewnątrz pseudoelementu ::picker(select).
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Nowy konfigurowalny <select> korzysta z funkcji wyskakujących okienka i pozycjonowania zakotwiczonego. Jest ona zbudowana na podstawie tych dwóch technologii. Oznacza to, że rozwijana lista opcji wyboru działa jak wyskakujące okienko zakotwiczone na przycisku reguły, który umożliwia otwarcie opcji wyboru.
Aby nadać styl temu ::picker(select), możesz użyć pozycjonowania za pomocą kotwicy (w tym kotwiczenia do innych elementów). Ten model treści oznacza też, że style animacji górnej warstwy działają z listą opcji, aby animować efekty wejścia i wyjścia.
Ulepszenie dotychczasowego elementu <select>
Wcześniej zespół Chrome pracował nad elementem <selectlist>. W tym poście opisano tę funkcję, która umożliwia korzystanie z istniejącego elementu <select>.
Jedną z głównych zalet ponownego wykorzystania istniejącego elementu <select> jest możliwość stopniowego ulepszania podstawowego elementu HTML. W porównaniu z zupełnie nowym elementem ponowne użycie <select> nadal będzie powodowało wyświetlanie na stronie treści o znaczeniu. Na przykładzie poniżej widać, jak wygląda opcja niestandardowa w porównaniu z tym, co widzi użytkownik w nieobsługiwanej przeglądarce:
option jest renderowany w wersji zastępczej elementu select.Styl podstawowy
Zmiany mogą być tak proste jak zmiana stylu wizualnego wybranego elementu. Możesz na przykład zaktualizować style przycisku, najeżdżaj kursorem i zaznacz style lub tło opcji wyboru. Gdy wyrazisz zgodę na korzystanie z platformy appearance: base-select, zastosuj dowolną usługę porównywania cen do wybranych części.
Aby dostosować wskaźnik strzałki, dodaj własny przycisk i strzałkę w zaznaczonym miejscu.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Następnie określ styl strzałki:
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
Złożone treści w opcjach
Możesz też dodawać treści i nadawać im styl w elementach <option> wewnątrz elementu <select>. Podstawowym przykładem jest dodawanie obrazów flag obok nazw krajów w menu. Aby to zrobić, dodaj element graficzny obok tekstu opcji.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
Bardziej złożony przykład może obejmować zdjęcia profilowe, imiona i nazwiska oraz alternatywne informacje ułatwiające podjęcie decyzji o tym, który element wybrać z menu.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
Nadawanie stylu wybranej opcji
Wybrana opcja może być wyświetlana inaczej w stanie wybranym niż w menu. Przykładem jest interfejs Gmaila, w którym, aby zaoszczędzić miejsce, etykieta znika po wybraniu opcji. Aby to zrobić, użyj elementu <selectedoption> do stylizacji. Pole <option> zawiera wszystkie te znaczniki:
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
Teraz zastosuj display: none na .text w <selectedoption>' aby ukryć tekst i wyświetlić tylko ikonę:
selectedoption .text {
display: none;
}
Opcje interaktywne
Mając pełną kontrolę nad stylem interfejsu ::picker(select), możesz korzystać z poprzedniej wersji demonstracyjnej, aby interfejs był interaktywny po najechaniu kursorem i zaznaczeniu. W tej wersji demonstracyjnej nowa funkcja calc-size() służy do animowania szerokości selektora – od wyświetlania ikon do pełnej szerokości opcji po najechaniu kursorem lub jeśli zaznaczenie ma opcję z widocznym zaznaczeniem.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
Ograniczenia i uwagi dotyczące dostępności
Z wielką mocą wiąże się wielka odpowiedzialność. Aby zapewnić dostępność funkcji, istnieje kilka ograniczeń tej funkcji.
- Oprócz elementów
<option>w elemencie<select>nie można na razie umieszczać żadnych elementów interaktywnych (z możliwością zaznaczenia), takich jak przyciski czy inne elementy. Obecnie proponowany model treści zezwala tylko na elementy<div>,<span>,<option>,<optgroup>,<img>,<svg>i<hr>. - Dzielenie przycisków jest obecnie w fazie eksperymentów, ponieważ opracowujemy dostępne rozwiązanie.
W przyszłości model treści powinien zostać rozszerzony, aby był bardziej elastyczny, ponieważ związane z nimi ułatwienia dostępu zostały dopracowane.
Podsumowanie
Cieszymy się, że ta funkcja rozwija się w grupach roboczych i organizacjach standardowych. Dzielimy się naszymi postępami w trakcie aktywnego tworzenia prototypu i oceny jego kształtu. Jeśli napotkasz coś, co nie działa zgodnie z oczekiwaniami, daj nam znać.
Prace nad tą funkcją wciąż trwają, dlatego chętnie poznamy Twoją opinię na jej temat, wypełniając krótki formularz opinii.
Dziękujemy za pomoc w sprawdzaniu, czy wszystko działa prawidłowo, i ułatwianie tworzenia w internecie łatwo dostępnych i spersonalizowanych elementów formularzy.