Branded Select-Stil

Die anpassbare Select API bietet eine deklarative, CSS-gesteuerte Möglichkeit, <select>-Elemente so zu gestalten, dass sie perfekt zum Designsystem Ihrer Marke passen. Wenn Sie appearance: base-select aktivieren, erhalten Sie Zugriff auf das interne Shadow-DOM des select-Elements. So können Sie die Schaltfläche, die Auswahlliste, das Pfeilsymbol und das Häkchen mit Standard-CSS-Eigenschaften gestalten.

Bisher musste das Steuerelement mit JavaScript von Grund auf neu erstellt werden, um ein vollständig gebrandetes „select“-Element zu erhalten. Das führte oft zu Problemen mit der Barrierefreiheit, der Tastaturnavigation und der nativen Formularintegration. Mit appearance: base-select erhalten Sie ein benutzerdefiniertes Design, während der Browser die Fokusverwaltung, das Rendering der obersten Ebene und die Bindungen für die Barrierefreiheit im Internet übernimmt.

Implementierung

So implementieren Sie das Styling für die Markenauswahl:

1. Anpassung aktivieren: Wenden Sie appearance: base-select sowohl auf das <select>-Element als auch auf das ::picker(select)-Pseudoelement an, das auf die Drop-down-Liste der Optionen abzielt.
2. Benutzerdefinierte Schaltfläche strukturieren (optional): Definiere ein <button>-Element direkt im <select>, um den Standardtrigger zu ersetzen. Verwenden Sie das <selectedcontent>-Element in diesem Button, um den Text oder Inhalt der aktuell ausgewählten Option darzustellen.
3. Auswahlliste gestalten: Verwenden Sie das Pseudoelement ::picker(select), um Typografie, Hintergrundfarben, Rahmen und Schatten auf die Drop-down-Liste anzuwenden. Der Browser rendert dies in der obersten Ebene, sodass z-index-Konflikte der Vergangenheit angehören.
4. Interne Symbole gestalten:
   • Verwenden Sie select::picker-icon, um das Pfeilsymbol zu formatieren oder zu ersetzen.
   • Mit option::checkmark können Sie das Häkchen neben der aktiven Option formatieren.
5. Stiloptionen: Sie können Stile auf <option>-Elemente für Hover-Zustände, Abstände und Layout anwenden.

Beispielcode: Auswahl des Markenkuriers

Im folgenden Beispiel wird ein benutzerdefiniertes Auswahlfeld mit einer Festbreitenschriftart und gestrichelten Rahmen dargestellt, das zur Ästhetik der Marke „Parcel“ passt.

/* 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 Implementierung und Best Practices

• DO use appearance: base-select when your design system requires high-fidelity, visual consistency across all form controls that cannot be achieved with standard cross-browser select overrides.
• Verwenden Sie diese Option NICHT, wenn Sie die native Auswahl des Betriebssystems verwenden (z.B. die Standardauswahl mit Scrollrad auf iOS-Geräten). Wenn Sie base-select aktivieren, werden native mobile UI-Steuerelemente zugunsten von im Web gerenderten Menüs auf oberster Ebene deaktiviert.
• DO verify that color contrast meets WCAG standards. Mit der anpassbaren Farbauswahl können Sie Ad-hoc-Farben festlegen. Sie sind jedoch dafür verantwortlich, dass der Text vor benutzerdefinierten Hintergründen lesbar bleibt.
• Layoutverhalten testen Wenn Sie appearance: base-select festlegen, wird das Standardverhalten des Browsers entfernt, bei dem die Größe des Auswahlfelds anhand der Breite der längsten Option festgelegt wird. Möglicherweise müssen Sie eine feste Breite festlegen oder Flex-/Grid-Einschränkungen verwenden, um Layout Shifts zu verhindern.
• Achte darauf, dass dein <select> ein name-Attribut und ein zugehöriges <label> hat. So bleibt die Komponente auch bei einer benutzerdefinierten UI für Screenreader zugänglich und funktioniert korrekt mit Standardformularübermittlungen.
• Verwenden Sie standardmäßige value-Attribute für Optionen, damit das Senden von Formularen genau wie zuvor funktioniert.

Fallback-Strategien

Fallbacks und Browserunterstützung für anpassbare <select>

In Browsern, die appearance: base-select noch nicht unterstützen, wird das <select>-Element zu einem Standard-Dropdown-Menü des Betriebssystems herabgestuft.

• Nicht-Text-Inhalte werden ignoriert: Ältere Browser entfernen HTML-Tags (wie <svg> oder <div>) innerhalb von <option>-Tags und rendern nur die Textknoten. Der Textinhalt des <option>-Elements muss lesbar und für sich genommen aussagekräftig sein.
• Umgang mit HTML-Strukturen: Standardparser ignorieren möglicherweise die <button>- und <selectedcontent>-Tags innerhalb von <select> oder behandeln sie als ungültig. Für die progressive Verbesserung sind keine umfangreichen JavaScript-Polyfills erforderlich, wenn Sie Standardtext als lesbaren Fallback betrachten.

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