Stylizowanie elementów sterujących formularza, takich jak element <select>, od lat jest zgłaszane jako jeden z głównych problemów deweloperów, dlatego pracujemy nad rozwiązaniem. Chociaż jest to skomplikowane zadanie i wymagało dużo czasu, jesteśmy już bardzo blisko wprowadzenia tej funkcji. Możliwa do dostosowania wersja elementu select jest oficjalnie na etapie 2 w WHATWG. Cieszy się dużym zainteresowaniem wśród twórców przeglądarek, a prototyp możesz przetestować w Chrome Canary 130.
Wypróbuj i przekaż nam swoją opinię
Sprawdź, czy masz zainstalowaną wersję 130 Chrome Canary i czy masz włączoną flagę funkcji eksperymentalnych platformy internetowej. Możesz włączyć tę flagę, wpisując chrome://flags na pasku adresu i włączając #experimental-web-platform-features. Po wykonaniu tych czynności wersje demonstracyjne Codepen powinny być widoczne w tym poście. Możesz też zajrzeć do tej kolekcji Codepen, aby zobaczyć je wszystkie w jednym miejscu.
Aby przesłać opinię na temat tej funkcji, użyj tego formularza. Zajmie Ci to tylko 3 minuty.
Przyjrzyjmy się funkcjom interfejsu API dostosowywanego elementu select, który bazuje na istniejącym tagu HTML select.
Akceptacja nowej wersji <select>
Aby włączyć nowe działanie, użyj właściwości CSS appearance zarówno w przypadku przycisku wyboru na stronie, jak i selektora. Aby wyrazić zgodę, ustaw appearance: base-select w elemencie <select> i w ::picker(select).
::picker(select) to nowy pseudoelement udostępniany przez klienta użytkownika, który ma zastosowanie tylko do elementów <select>, które zostały objęte nowym zachowaniem za pomocą appearance: base-select. Ten pseudoelement selektora to wyskakujące okienko, które jest wywoływane przez podstawowy przycisk wyboru. Możesz wyrazić zgodę na obie opcje, jak pokazano w tym kodzie:
select,
::picker(select) {
appearance: base-select;
}
Możesz wybrać akceptację tylko przycisku na stronie, ale nie możesz wybrać akceptacji tylko wyskakującego okienka selektora bez akceptacji przycisku na stronie. Zasób ::picker(select) jest tworzony dopiero po zastosowaniu zasobu appearance: base-select do zasobu <select>.
Teraz możesz dostosować element wyboru. Nowy element select z możliwością dostosowania ma 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 dostosowany element select w porównaniu z dotychczasowym elementem select w Chrome na macOS:
Podział na części
W nowym trybie dostosowywania elementu select masz dostęp do nowych elementów, takich jak:
– selectedoption: odzwierciedla wewnętrzny kod HTML aktualnie wybranej opcji.
- option::before: zawiera znacznik wyboru wskazujący aktualnie wybraną opcję jako domyślne ułatwienie dostępu (może to ulec zmianie).
- ::picker(select): wyskakujące okienko, które zawiera całą zawartość poza button w niestandardowym elemencie select.
Możesz stylizować dowolną część elementu select. Możesz na przykład dodać dowolną nieinteraktywną treść w elementach <option>, nadać styl przyciskowi na stronie, który otwiera menu, oraz nadać styl liście opcji (::picker(select)).
Możesz też dostosować styl elementu button, dodać własny wskaźnik strzałki i dowolną treść wewnątrz i wokół dowolnego elementu. Oprócz dodawania treści możesz ukryć dowolne z tych nowych elementów i stylów domyślnych. Jeśli na przykład nie chcesz, aby w pseudoelemencie ::before opcji pojawiała się ikona potwierdzenia, użyj tego kodu CSS.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Wewnątrz elementu select może znajdować się nieograniczona liczba elementów, ale przeglądarka umieści wszystko poza elementem <button> w pseudoelemencie ::picker(select), który zachowuje się jak wyskakujące okienko zakotwiczone do przycisku. Ten element <button> przełącza ::picker(select). Opcje i inne elementy bezpośrednio w elemencie select zostaną przeniesione do elementu ::picker(select). Możesz też użyć własnego elementu wrapper do celów stylizacji. Ten kontener również zostanie umieszczony w pseudoelemencie ::picker(select).
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Nowy, dostosowywany element <select> korzysta z funkcji popover i anchor positioning. Opiera się na tych 2 technologiach. Oznacza to, że lista opcji w menu działa jak wyskakujące okienko, które jest zakotwiczone do przycisku aktywującego otwierającego menu.
Możesz użyć pozycjonowania zakotwiczonego, aby dostosować styl tego elementu wyskakującego ::picker(select) (w tym zakotwiczyć go do innych elementów). Ten model treści oznacza również, że style animacji warstwy górnej działają z listą opcji, aby animować efekty wejścia i wyjścia.
Ulepsz istniejący element <select>
Wcześniej zespół Chrome pracował nad pomysłem elementu <selectlist>. W tym poście opisujemy tę funkcję, która została przeprojektowana tak, aby wykorzystywać istniejący element <select>.
Jedną z głównych zalet ponownego użycia istniejącego elementu <select> jest możliwość stopniowego ulepszania podstawowego elementu HTML. W porównaniu z zupełnie nowym elementem ponowne użycie elementu <select> nadal będzie powodować wyświetlanie na stronie istotnych treści. Poniższy przykład pokazuje, jak wygląda dostosowany element select w porównaniu z tym, co zobaczy użytkownik w nieobsługiwanej przeglądarce:
option jest renderowana w wersji zastępczej elementu select.Podstawowe style
Zmiany mogą być tak proste jak styl wizualny elementu wyboru. Możesz na przykład zaktualizować style przycisków, style najechania i zaznaczenia lub tło wybranych opcji. Po włączeniu opcji appearance: base-select zastosuj dowolny styl CSS do części elementu select.
Aby dostosować wskaźnik strzałki, dodaj własny przycisk i strzałkę wewnątrz elementu select.
<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 pójść o krok dalej i dodawać oraz stylizować treści inne niż ciągi znaków w elementach <option> wewnątrz <select>. Podstawowym przykładem jest dodanie 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, imiona i nazwiska oraz informacje alternatywne, które pomogą Ci podjąć decyzję, 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>
Stylizowanie wybranej opcji
Możesz chcieć, aby wybrana opcja była wyświetlana inaczej w wybranym stanie niż w menu. Przykładem jest interfejs Gmaila, w którym po wybraniu opcji etykieta jest usuwana, aby zaoszczędzić miejsce. Aby to zrobić, użyj elementu <selectedoption> do stylizacji. Element <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 wewnątrz <selectedoption>, aby ukryć treść tekstową i wyświetlić tylko ikonę:
selectedoption .text {
display: none;
}
Opcje interaktywne
Mając pełną kontrolę nad stylem elementu ::picker(select), rozbuduj poprzednią wersję demonstracyjną, aby była interaktywna po najechaniu kursorem i skupieniu uwagi. W tym przykładzie 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 element select ma opcję z focus-visible.
/* 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 ułatwień dostępu
Z wielką mocą wiąże się wielka odpowiedzialność. Aby zapewnić dostępność, funkcja ta ma pewne ograniczenia.
- W elemencie
<select>nie są jeszcze dozwolone żadne elementy interaktywne (z możliwością zaznaczenia), takie jak przyciski czy inne elementy, z wyjątkiem elementów<option>. Na razie proponowany model treści dopuszcza tylko elementy<div>,<span>,<option>,<optgroup>,<img>,<svg>i<hr>. - Przyciski dzielone są obecnie w fazie eksperymentalnej, ponieważ pracujemy nad rozwiązaniem ułatwiającym dostęp.
W przyszłości model treści ma zostać rozszerzony, aby był bardziej elastyczny, gdy ułatwienia dostępu w tych usługach zostaną dopracowane.
Podsumowanie
Cieszymy się, że ta funkcja jest rozwijana przez grupy robocze i organizacje normalizacyjne. Będziemy informować o postępach w tworzeniu prototypu i ocenie kształtu tej funkcji. Jeśli zauważysz, że coś nie działa zgodnie z oczekiwaniami, daj nam znać.
Ta funkcja jest nadal w fazie rozwoju, dlatego chętnie poznamy Twoją opinię. Możesz ją przesłać za pomocą tego krótkiego formularza opinii.
Dziękujemy za pomoc w tworzeniu dostępnych i konfigurowalnych elementów sterujących formularzy w internecie.