Stijl van Branded Select

De aanpasbare select-API biedt een declaratieve, CSS-gestuurde manier om <select>-elementen op te maken, zodat ze perfect passen bij het ontwerpsysteem van je merk. Als je je aanmeldt voor appearance: base-select, krijg je toegang tot de interne schaduw-DOM van het select-element. Zo kun je de knop, de lijst met optiekiezers, het pijl-icoon en de vinkje-indicator opmaken met standaard CSS-property's.

Eerder moest je de bedieningselementen helemaal opnieuw opbouwen met JavaScript om een volledig gemerkte selectie te krijgen. Hierdoor werden de toegankelijkheid, toetsenbordnavigatie en integratie van systeemeigen formulieren vaak verbroken. Met appearance: base-select krijg je een aangepaste look terwijl de browser focusbeheer, weergave van de bovenste laag en toegankelijkheidsbindingen afhandelt.

Implementeren

Zo implementeert u de styling van Branded Select:

1. Aanmelden voor aanpassing: Pas appearance: base-select toe op zowel het element <select> als het pseudoelement ::picker(select) (dat het dropdownmenu met opties target).
2. De aangepaste knop structureren (optioneel): Definieer een <button>-element rechtstreeks in de <select> om de standaardtrigger te vervangen. Gebruik het element <selectedcontent> in deze knop om de tekst of content van de geselecteerde optie weer te geven.
3. De kiezerlijst opmaken: Gebruik het pseudo-element ::picker(select) om typografie, achtergrondkleuren, randen en schaduwen toe te passen op het dropdownmenu. De browser geeft dit weer in de bovenste laag, waardoor z-index-conflicten tot het verleden behoren.
4. Interne iconen voor stijl:
   • Gebruik select::picker-icon om het pijl-icoon op te maken of te vervangen.
   • Gebruik option::checkmark om de stijl van de vinkjesindicator naast de actieve optie aan te passen.
5. Stijlopties: Pas stijlen toe op <option> elementen voor de muisaanwijzerstatus, opvulling en vormgeving.

Voorbeeldcode: Branded Courier Select

In het volgende voorbeeld zie je een aangepaste selectie met een monospace-lettertype en gestreepte randen die passen bij de specifieke merkstijl van '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>

Strategische implementatie en best practices

• Gebruik appearance: base-select WEL als je ontwerpsysteem een hoge mate van visuele consistentie vereist voor alle formulierbedieningselementen die niet kunnen worden bereikt met standaard overschrijvingen voor selectie in meerdere browsers.
• Gebruik dit NIET als je de systeemeigen kiezer van het besturingssysteem gebruikt (bijvoorbeeld de standaard kiezer met scrollwiel op iOS-apparaten). Als u zich aanmeldt voor base-select, meldt u zich af voor systeemeigen mobiele UI-bedieningselementen ten gunste van webgerenderde menu's op de bovenste laag.
• WEL: Controleer of het kleurcontrast voldoet aan de WCAG-normen. Met de aanpasbare kiezer kunt u ad-hoc kleuren instellen, maar u bent er zelf verantwoordelijk voor dat de tekst leesbaar blijft op aangepaste achtergronden.
• Test het gedrag van de lay-out. Als je appearance: base-select instelt, wordt het standaard browsergedrag verwijderd om de selectie te schalen op basis van de breedte van de langste optie. U moet misschien een vaste breedte instellen of flex-/rasterbeperkingen gebruiken om indelingsverschuivingen te voorkomen.
• Zorg dat uw <select> een kenmerk name en een bijbehorende <label> heeft. Zo blijft de component zelfs met een aangepaste UI toegankelijk voor schermlezers en werkt deze correct met standaard formulierinzendingen.
• Gebruik standaard value-kenmerken voor opties om te zorgen dat het indienen van formulieren precies zo werkt als voorheen.

Reservestrategieën

Fallbacks en browserondersteuning voor aanpasbare <select>

Voor browsers die appearance: base-select nog niet ondersteunen, wordt het element <select> op een nette manier gedegradeerd naar een standaard dropdownmenu van het besturingssysteem.

• Niet-tekstcontent genegeerd: Oudere browsers verwijderen HTML-tags (zoals <svg> of <div>) binnen <option>-tags en geven alleen de tekstnodes weer. Zorg dat de tekstcontent van de <option> op zichzelf leesbaar en betekenisvol is.
• Verwerking van HTML-structuur: Standaard parsers negeren de tags <button> en <selectedcontent> in <select> of behandelen ze als ongeldig. Er zijn geen zware JavaScript-polyfills vereist voor progressive enhancement als je standaardtekst als een leesbare fallback beschouwt.

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