Stylizacja Branded Select

Interfejs Customizable Select API umożliwia deklaratywne, oparte na CSS stylizowanie elementów <select>, aby idealnie pasowały do systemu projektowania Twojej marki. Po włączeniu appearance: base-select uzyskasz dostęp do wewnętrznego shadow DOM elementu select, co pozwoli Ci stylizować przycisk, listę wyboru opcji, ikonę strzałki i znacznik wyboru za pomocą standardowych właściwości CSS.

Wcześniej, aby uzyskać w pełni dostosowany element select, trzeba było od podstaw utworzyć element sterujący za pomocą JavaScriptu, co często powodowało problemy z ułatwieniami dostępu, nawigacją za pomocą klawiatury i integracją z formularzami natywnymi. Dzięki appearance: base-select możesz uzyskać niestandardowy wygląd, podczas gdy przeglądarka zajmuje się zarządzaniem zaznaczeniem, renderowaniem górnej warstwy i powiązaniami ułatwień dostępu.

Jak to zrobić?

Aby wdrożyć stylizację wyboru marki:

1. Akceptacja dostosowywania: zastosuj appearance: base-select zarówno do elementu <select>, jak i pseudoelementu ::picker(select) (który jest kierowany na listę opcji).
2. Struktura przycisku niestandardowego (opcjonalnie): zdefiniuj element <button> bezpośrednio w elemencie <select>, aby zastąpić domyślny aktywator. Użyj elementu <selectedcontent> wewnątrz tego przycisku, aby reprezentować tekst lub zawartość aktualnie wybranej opcji.
3. Stylizacja listy wyboru: użyj pseudoelementu ::picker(select), aby zastosować typografię, kolory tła, obramowania i cienie do listy rozwijanej. Przeglądarka renderuje go w górnej warstwie, dzięki czemu konflikty z-index należą do przeszłości.
4. Style ikon wewnętrznych:
   • Użyj select::picker-icon, aby zmienić styl ikony strzałki lub ją zastąpić.
   • Użyj option::checkmark, aby określić styl znacznika wyboru obok aktywnej opcji.
5. Opcje stylu: zastosuj style do elementów <option>, aby określić stany najechania kursorem, dopełnienie i układ.

Przykładowy kod: wybór kuriera markowego

Poniższy przykład pokazuje niestandardowe pole wyboru ze stylem czcionki o stałej szerokości znaków i przerywanymi obramowaniami, które pasują do estetyki marki „parcel”.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

Strategiczne wdrażanie i sprawdzone metody

• UŻYWAJ elementu appearance: base-select, gdy system projektowania wymaga wysokiej jakości i spójności wizualnej wszystkich elementów sterujących formularza, której nie można osiągnąć za pomocą standardowych zastąpień wyboru w różnych przeglądarkach.
• NIE używaj tego, jeśli korzystasz z natywnego selektora systemu operacyjnego (np. standardowego selektora kółka przewijania na urządzeniach z iOS). Włączenie base-select powoduje wyłączenie natywnych elementów sterujących interfejsu mobilnego na rzecz menu najwyższego poziomu renderowanych w internecie.
• DO verify that color contrast meets WCAG standards. Selektor z możliwością dostosowania umożliwia ustawianie kolorów ad hoc, ale to Ty odpowiadasz za to, aby tekst był czytelny na niestandardowym tle.
• Przetestuj działanie układu. Ustawienie appearance: base-select usuwa domyślne działanie przeglądarki polegające na określaniu rozmiaru elementu select na podstawie szerokości najdłuższej opcji. Aby zapobiec przesunięciom układu, może być konieczne ustawienie stałej szerokości lub użycie ograniczeń flex/grid.
• Upewnij się, że element <select> ma atrybut name i powiązany element <label>. Dzięki temu nawet w przypadku niestandardowego interfejsu komponent pozostaje dostępny dla czytników ekranu i działa prawidłowo ze standardowymi formularzami.
• Użyj standardowych atrybutów value w opcjach, aby przesyłanie formularzy działało dokładnie tak jak wcześniej.

Strategie zastępcze

Kreacje zastępcze i obsługa przez przeglądarki w przypadku formatu <select> z możliwością dostosowania

W przypadku przeglądarek, które nie obsługują jeszcze appearance: base-select, element <select> jest zastępowany standardowym menu rozwijanym systemu operacyjnego.

• Ignorowanie treści nietekstowych: starsze przeglądarki usuwają tagi HTML (takie jak <svg> lub <div>) wewnątrz tagów <option> i renderują tylko węzły tekstowe. Upewnij się, że treść tekstowa elementu <option> jest czytelna i ma sens sama w sobie.
• Obsługa struktury HTML: standardowe parsery mogą ignorować tagi <button> i <selectedcontent> wewnątrz tagu <select> lub traktować je jako nieprawidłowe. Jeśli standardowy tekst jest dla Ciebie czytelną opcją zastępczą, do progresywnego ulepszania nie są wymagane żadne obciążające skrypty polyfill JavaScript.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});