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. Chociaż jest to skomplikowane i zajmuje dużo czasu, 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 instalacja Chrome Canary została zaktualizowana do wersji 130 i czy masz włączoną flagę eksperymentalnych funkcji platformy internetowej. Możesz włączyć tę flagę, wpisując chrome://flags na pasku adresu i włączając #experimental-web-platform-features. Następnie powinieneś/powinnaś zobaczyć w tym poście demonstracje Codepen. Możesz też sprawdzić tę kolekcję Codepen, aby wyświetlić wszystkie te projekty w jednym miejscu.
Aby przesłać opinię o tej funkcji, użyj tego formularza. Zajmie to tylko 3 minuty.
Przyjrzyjmy się funkcjom interfejsu Select API, który opiera się na dotychczasowym tagu HTML select.
Włączanie nowej wersji <select>
Aby włączyć nowe działanie, użyj właściwości CSS appearance zarówno w przycisku wyboru na stronie, jak i w selektorze wyboru. Aby to zrobić, ustaw wartość 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 wyskakujące okienko wywoływane przez podstawowy przycisk 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. Oto, jak wygląda domyślny element selektywny z dostosowaniem w porównaniu z elementem selektywnym w Chrome na macOS:
Analiza poszczególnych części
Gdy znajdziesz się w nowym trybie elementów do wyboru z możliwością ich dostosowywania, 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): menu podręczne zawierające wszystkie treści poza button w ramach opcji dostosowania.
Możesz sformatować dowolną część zaznaczenia. Możesz na przykład dodać dowolne nieinteraktywne treści do elementów <option>, nadać styl przyciskowi na stronie, który otwiera menu wyboru, i nadać styl menu opcji (elementowi ::picker(select)).
Możesz też nadać styl button, czyli swojemu własnemu wskaźnikowi strzałki, oraz dodać dowolne treści do środka lub wokół dowolnego elementu. Oprócz dodawania treści możesz ukryć dowolne z tych nowych elementów i stylów domyślnych. Jeśli np. nie chcesz, aby w pseudoelemencie ::before opcji było widoczne pole wyboru, użyj tego kodu CSS.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
W elementach wyboru może znajdować się nieograniczona liczba elementów, ale przeglądarka sklasyfikuje wszystko poza elementem <button> jako pseudoelement ::picker(select), który działa jak wyskakujące okienko zakotwiczone do przycisku. Ten <button> włącza lub wyłącza ::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>
Nowa, dostosowywalna <select> wykorzystuje funkcje wyskakującego okienka i pozycjonowania za pomocą kotwicy. Jest ona zbudowana na podstawie tych dwóch technologii. Oznacza to, że lista opcji w menu w elemencie select działa jak menu wyskakujące, które jest zakotwiczone do przycisku uruchamiającego, który otwiera element select.
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 warstwy górnej działają z listą opcji, aby animować efekty wejścia i wyjścia.
Ulepszenie dotychczasowego elementu <select>
Wcześniej zespół Chrome pracował nad pomysłem elementu <selectlist>. W tym poście opisaliśmy, jak zmienić tę funkcję, aby używała istniejącego elementu <select>.
Jedną z głównych zalet ponownego używania dotychczasowego 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 porównujemy spersonalizowany element select z tym, co zobaczy użytkownik w nieobsługiwanej przeglądarce:
option jest renderowany w wersji zastępczej elementu select.Stylizacja podstawowa
Zmiany mogą być tak proste jak zmiana stylu wizualnego wybranego elementu. Możesz na przykład zaktualizować style przycisków, styl kursora i styla fokusa lub tło opcji wyboru. Po włączeniu usługi porównywania cen 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ę wewnątrz elementu wyboru.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Następnie nadaj strzałce styl:
/* 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 stylizować je 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 obrazu 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, nazwy i inne informacje, które pomogą Ci zdecydować, który element wybrać w 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
Możesz chcieć, aby wybrana opcja była wyświetlana w wybranym stanie inaczej 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. <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 do .text w sekcji <selectedoption>, aby ukryć treść tekstową i wyświetlić tylko ikonę:
selectedoption .text {
display: none;
}
Opcje interakcji
Dzięki pełnej kontroli nad stylami ::picker(select) możesz tworzyć na podstawie poprzedniego przykładu interaktywne elementy, które będą reagować na najechanie kursorem i po kliknięciu. W tym pokazie nowa funkcja calc-size() służy do animowania szerokości selektora od wyświetlania ikon do wyświetlania pełnej szerokości opcji po najechaniu kursorem lub jeśli selektor ma opcję widoczną po najechaniu kursorem.
/* 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ść, wprowadziliśmy pewne ograniczenia tej funkcji.
- Oprócz elementów
<option>w elementach<select>nie są jeszcze dozwolone żadne elementy interaktywne (które można zaznaczyć), takie jak przyciski czy inne elementy. Obecnie proponowany model treści dopuszcza tylko elementy<div>,<span>,<option>,<optgroup>,<img>,<svg>i<hr>. - Przyciski podzielone są obecnie w fazie eksperymentu, ponieważ pracujemy nad rozwiązaniem umożliwiającym dostępność.
W przyszłości model treści powinien się rozszerzyć i stać się bardziej elastyczny, ponieważ w przypadku tych treści zostanie rozbudowana historia dotycząca dostępności.
Podsumowanie
Cieszymy się, że ta funkcja jest rozwijana przez grupy robocze i organizacje opracowujące standardy. Chcielibyśmy podzielić się z Wami naszymi postępami w tworzeniu prototypu i ocenie tej funkcji. Jeśli coś nie działa zgodnie z oczekiwaniami, daj nam znać.
Ta funkcja jest wciąż w fazie rozwoju, dlatego prosimy o wypełnienie krótkiego formularza opinii.
Dziękujemy za pomoc w ułatwieniu tworzenia w internecie łatwo dostępnych i spersonalizowanych elementów sterujących formularzy.