Customizable Select: Endlich das echte <select> gestalten

Wer über das Standard-Select-Element hinausgehen wollte, hatte bislang nur die Wahl zwischen zwei schlechten Kompromissen: schwergewichtige JavaScript-Bibliotheken oder jede Menge div-Elemente, wobei die Barrierefreiheit in beiden Fällen heikel wurde.¹ Auf der WWDC 2026 zeigte das Safari-Team den Ausweg: Customizable Select, eine Reihe von HTML- und CSS-Erweiterungen, die das bereits vorhandene <select>-Element vollständig gestaltbar machen und dabei die Semantik, die Tastaturnavigation und die Screenreader-Unterstützung erhalten, die es ohnehin schon bietet. Ab Safari 27 und Chrome 135 können Sie den Button, das Drop-down-Menü, den Haken und sogar den Pfeil neu gestalten und anschließend Bilder, Videos oder Emojis in Ihre Optionen einsetzen.¹

TL;DR

• Customizable Select gestaltet das echte <select>-Element allein mit HTML und CSS und ersetzt damit die JavaScript-Bibliotheken und div-Stapel, zu denen Entwickler zuvor griffen. Die Verfügbarkeit beginnt mit Safari 27 und Chrome 135.¹
• Die Aktivierung erfolgt über appearance: base-select, zweimal angewendet: einmal auf dem Select selbst, um die Gestaltung des Buttons freizuschalten, und einmal auf ::picker(select), um sich vom nativen Drop-down-Menü abzumelden.¹
• Begleitend kommen neue gestaltbare Bestandteile hinzu: ::picker-icon gestaltet den Pfeil über die content-Eigenschaft und eine width neu, ::checkmark auf dem Option-Element tauscht den Haken auf dieselbe Weise aus, und die Pseudoklasse :open gestaltet den Button, solange das Menü geöffnet ist.¹
• Optionen nehmen jede Art von Inhalt auf: Bilder, Videos, Emojis. Die Session-Demo setzt ein SVG und eine Beschriftung in jede Option und legt das gesamte Drop-down anschließend als CSS-Grid mit grid-template und gap aus.¹
• Ein <button> als erstes Kind von <select>, was in HTML zuvor nicht erlaubt war, ersetzt den eingebauten Button; das darin enthaltene <selectedcontent>-Element zeigt den reichen Inhalt der ausgewählten Option an.²
• Progressive Enhancement gibt es gratis dazu: Browser ohne Unterstützung greifen auf das native Pop-up zurück, und das semantische Select-Element behält seine eingebaute Barrierefreiheit überall.¹

Von der div-Suppe zurück zu semantischem HTML

Tim, ein Safari-Ingenieur, wendet ab 2:48 appearance: base-select auf eine Demo eines Fotografen-Portfolios an.

Die Session setzt bei dem an, was <select> bereits gut kann. Das Element bietet grundlegende Barrierefreiheit von Haus aus: Tastaturnavigation über die Option-Elemente und ein solides Screenreader-Verhalten, alles ohne externe Bibliotheken.¹ Auf Apple-Plattformen ist die native Darstellung der vertraute Pull-down-Button, und er passt zu jedem anderen Bedienelement der Plattform, was den Nutzern eine bekannte Art der Navigation gibt.¹

Der Haken war seit jeher das Design. Setzt man das native Bedienelement auf eine gestaltete Website, wirkt es deplatziert; es weigert sich, sich einzufügen. Bislang bedeutete die Lösung, das Element vollständig zugunsten eines JavaScript-Widgets oder eines Haufens von divs aufzugeben und die Barrierefreiheit von Hand neu aufzubauen. Customizable Select behält das Element und übergibt Ihnen die Gestaltung, in drei Schritten, die die Session an einem echten Fotografen-Portfolio durchgeht: dem Button, dem Drop-down-Menü und schließlich Inhalten, die über reinen Text hinausgehen.¹

Den Button gestalten: base-select, ::picker-icon und :open

Der Button ist der Teil des Selects, auf den Sie klicken, um das Menü anzuzeigen, und der erste Schritt ist eine einzige Deklaration:

select {
  appearance: base-select;
}

appearance: base-select tauscht die native Darstellung gegen einen kleineren Satz von Basis-Stilen aus, die Sie ändern können.¹ Die Wirkung zeigt sich sofort über die Vererbung: Die Demo-Website setzt font-family: Gill Sans auf dem Body, und der Select-Button erbt nun die Body-Schrift und passt damit zur Beschriftung daneben.¹ Von dort aus lassen sich Hintergrund, Rahmen und Padding wie bei jedem anderen Element anpassen.

Zwei neue Anknüpfungspunkte vollenden den Button. Der Pfeil erhält seinen eigenen Selektor, ::picker-icon, der eine content-Eigenschaft für ein Ersatz-Glyph und eine width zu seiner Dimensionierung entgegennimmt. Die Pseudoklasse :open gestaltet den Button anders, solange das Drop-down-Menü geöffnet ist:

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

Das Urteil der Session zum Ergebnis: ein Select, das mit nur wenigen Zeilen CSS zum Rest der Website passt.¹

Das Drop-down gestalten: ::picker(select) und ::checkmark

Das Menü bringt eigene gestaltbare Bestandteile mit. Das Drop-down selbst sprechen Sie mit ::picker(select) auf dem Select-Element an, den Haken mit ::checkmark auf dem Option-Element.¹ Die Abmeldung vom nativen Menü erfordert ein zweites appearance: base-select, diesmal auf dem Picker:

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

Mit dem so geschaffenen leeren Blatt richtet die Demo die Abstände mit Padding und Margin ein und kümmert sich anschließend um Rahmen und einen Box-Shadow am Drop-down.¹ Um die aktuelle Auswahl hervorzuheben, kommt der bereits vorhandene Selektor :checked statt etwas Neuem zum Einsatz: die ausgewählte Option fett setzen, die übrigen ausgrauen.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark funktioniert genau wie ::picker-icon: Sie setzen content und eine width, und der Standard-Haken wird zu jedem beliebigen Glyph, das zu Ihrem Design passt.¹

Reiche Inhalte in Optionen, als Grid ausgelegt

Die größere Veränderung betrifft das, was in <option> hineinkommt. Die Session ist eindeutig: jede Art von Inhalt funktioniert, Bilder, Videos, Emojis, was immer Sie möchten.¹ Die Demo baut einen Kategorie-Browser für die beliebtesten Motive des Fotografen, mit einem SVG-Symbol und einer Beschriftung in jeder Option:

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

Beachten Sie das leere alt. Tim lässt den Alt-Text des Bildes bewusst leer, weil die Beschriftung „Flowers” sonst von Screenreadern zweimal vorgelesen würde.¹ Ein kleines Detail mit echter Konsequenz: reiche Optionen bleiben mit assistiven Technologien genauso nutzbar wie einfache.

Da der Standard-Haken entfernt wurde, hebt die Demo die ausgewählte Option stattdessen über den checked-Selektor und Farbänderungen hervor.¹ Ein Problem bleibt: Optionen aus Symbol und Beschriftung machen das Drop-down sehr lang. Die Lösung greift erneut auf bereits vorhandenes CSS zurück, denn der Picker ist nun ein ganz gewöhnliches Ziel für die Gestaltung. Ein Grid-Layout formt das gesamte Menü um:

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template legt die Anzahl der Zeilen und Spalten fest, während gap den Abstand zwischen den Grid-Zellen bestimmt, und das Drop-down rastet in ein geordnetes Raster aus Kategorien ein.¹ Die Session schließt mit einem Schlussakkord zum selben Thema: ein radialer Farbwähler, vollständig mit Customizable Select gebaut.¹

Der austauschbare Button und selectedcontent

Eine Lücke bleibt im Kategorie-Browser: Die SVG-Symbole leben in den Optionen, doch der Button, der die aktuelle Auswahl zeigt, stellt nur Text dar.¹ Customizable Select schließt die Lücke, indem es Ihnen erlaubt, den eingebauten Button zu ersetzen, indem Sie ein <button>-Element als erstes Kind des <select> platzieren. Einen Button in ein Select zu setzen, war in HTML zuvor nicht erlaubt; nun nimmt es eigene Inhalte auf, etwa Beschriftungen, oder das Element, das genau für diese Aufgabe gebaut wurde.¹

WebKits Ankündigung der Safari-27-Beta nennt dieses Element: <selectedcontent>. Im Button platziert, der das erste Kind des Selects ist, zeigt es den Inhalt der derzeit ausgewählten Option an und lässt sich direkt gestalten.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

Das Element spiegelt jeden reichen Inhalt wider, der zur ausgewählten Option gehört, etwa das SVG neben der Beschriftung „Everything” in der Demo, sodass der Button endlich dieselbe visuelle Sprache zeigt wie das Menü, das er öffnet.¹²

Progressive Enhancement ist eingebaut

Der letzte Schritt der Session ist jener, den Teams auf eigene Gefahr überspringen: das Design in Browsern zu prüfen, die Customizable Select nicht unterstützen. Die Antwort ist die beste Art von langweilig. Progressive Enhancement setzt ein, das Bedienelement bleibt nutzbar, und die Kunden erhalten das native Pop-up.¹ Die Wiederverwendung des Select-Elements bedeutet, dass die Fallback-Geschichte bereits existiert, und weil <select> ein semantisches Element ist, überleben die eingebauten Funktionen zur Barrierefreiheit in jedem Browser.¹

Die Verfügbarkeit ist konkret: Safari 27 und Chrome 135. Um die Funktionen jetzt auszuprobieren, laden Sie Safari Technology Preview oder Safari Beta herunter.¹ Der abschließende Rat der Session ist praktisch: Sehen Sie sich die Demo auf webkit.org an, gestalten Sie etwas Einfaches auf Ihrer eigenen Website, testen Sie in Browsern ohne Unterstützung sowie mit assistiven Werkzeugen, und lesen Sie WebKits Material zu Best Practices, damit die Oberfläche für alle funktioniert.¹

Was das Safari-Team in den Labs ergänzt hat

Ein paar Dinge aus den WWDC-Labs runden das Bild ab, besonders dort, wohin sich Customizable Select entwickelt.

Der Punkt auf der Roadmap, den man im Auge behalten sollte, ist appearance: base, dieselbe Aktivierung, verallgemeinert auf alle Formular-Bedienelemente statt nur auf <select>. Der Wert existiert in der CSS-Spezifikation, wird aber noch nirgends ausgeliefert.³ Im Lab sagte das Panel, er werde „derzeit nicht ausgeliefert” und komme später, und die Diskussion zur Spezifikation sei noch offen ungeklärt, die Panelisten waren live uneins, wie die ungestaltete Basis überhaupt aussehen sollte.⁴ Die genannten Designziele sind klar genug: maximal von den Seitenstilen erben, kein Layout-Zauber und identische Basis-Darstellung sowie identische DOM-Struktur über alle Engines hinweg.⁴

Die Vorgeschichte erklärt, warum Customizable Select überhaupt <select> wiederverwendet. Der ursprüngliche Vorschlag war ein brandneues <selectmenu>-Element. Ein WebKit-Standardingenieur drängte stattdessen auf die Wiederverwendung von <select>, damit Browser ohne Unterstützung den nativen Fallback gratis behalten, was genau die Progressive-Enhancement-Geschichte von oben ist.⁴

Eine harte Regel ging aus dem Panel hervor: Behalten Sie immer Textinhalt in Ihren Optionen. Optionen, die nur aus Icons bestehen, stellen in Browsern ohne Unterstützung ein leeres natives Pop-up dar, was Nutzer auf nicht unterstützenden Engines strandet.⁴

Wichtigste Erkenntnisse

Für Frontend-Entwickler: - Aktivieren Sie mit appearance: base-select auf dem Select-Element für den Button und erneut auf ::picker(select) für das Drop-down; gestalten Sie dann Hintergrund, Rahmen, Padding, Abstände und Box-Shadow wie bei jedem anderen Element.¹ - Tauschen Sie den Pfeil mit ::picker-icon und den Haken mit ::checkmark aus, beides über content plus width; gestalten Sie den geöffneten Zustand mit :open; heben Sie die Auswahl mit dem bereits vorhandenen Selektor :checked hervor.¹ - Setzen Sie echtes HTML in <option> (Bilder, Videos, Emojis) und formen Sie das Menü mit vorhandenem CSS um, etwa mit einem Grid aus grid-template plus gap; ersetzen Sie den eingebauten Button durch ein <button> als erstes Kind, das <selectedcontent> enthält.¹²

Für Teams mit Fokus auf Barrierefreiheit: - Das semantische Select behält Tastaturnavigation und Screenreader-Unterstützung ohne externe Bibliotheken, in unterstützten wie nicht unterstützten Browsern gleichermaßen.¹ - Wenn Optionen sowohl ein Bild als auch eine Textbeschriftung tragen, lassen Sie den Alt-Text des Bildes leer, damit Screenreader die Beschriftung nicht zweimal vorlesen.¹ - Testen Sie vor der Auslieferung in Browsern ohne Unterstützung und mit assistiven Werkzeugen, gemäß der Checkliste der Session selbst.¹

Für technische Leiter, die den Rollout planen: - Behandeln Sie Customizable Select als Progressive Enhancement: Safari 27 und Chrome 135 erhalten das eigene Design, alle anderen das native Pop-up, und kein JavaScript-Fallback ist erforderlich.¹ - Bewerten Sie es jetzt in Safari Technology Preview oder Safari Beta und wägen Sie es gegen die Drop-down-Bibliothek ab, die derzeit in Ihrem Bundle steckt.¹

FAQ

Was ist Customizable Select?

Customizable Select ist eine Reihe von HTML- und CSS-Fähigkeiten, vom Safari-Team auf der WWDC 2026 eingeführt und ab Safari 27 und Chrome 135 verfügbar, die das bereits vorhandene <select>-Element vollständig anpassbar macht. Sie gestalten den Button, das Drop-down-Menü, den Pfeil und den Haken mit CSS und setzen reiche Inhalte in Optionen, während die eingebaute Barrierefreiheit des Elements erhalten bleibt.¹

Wie aktiviere ich Customizable Select?

Wenden Sie appearance: base-select an zwei Stellen an: auf dem Select-Element selbst, was die native Button-Darstellung durch einen kleineren Satz von Basis-Stilen ersetzt, und auf ::picker(select), was das Drop-down-Menü von seiner nativen Darstellung abmeldet, sodass Sie es frei gestalten können.¹

Kann ich Bilder oder anderes HTML in Option-Elemente setzen?

Ja. Die Session erklärt, dass Sie jede Art von Inhalt in Optionen setzen können: Bilder, Videos, Emojis. Die Demo nutzt pro Option ein SVG und eine Textbeschriftung, mit leerem Alt-Text des Bildes, damit Screenreader die Beschriftung nur einmal vorlesen, und legt das Menü als CSS-Grid mit grid-template und gap aus.¹

Was ist das selectedcontent-Element?

<selectedcontent> ist das Element, das den reichen Inhalt der derzeit ausgewählten Option innerhalb des Select-Buttons anzeigt. Customizable Select erlaubt ein <button> als erstes Kind von <select>, was in HTML zuvor nicht erlaubt war; ein <selectedcontent> in diesem Button platziert, spiegelt es den Inhalt der ausgewählten Option wider, etwa ein SVG neben seiner Beschriftung, und das Element lässt sich direkt gestalten.¹²

Was passiert in Browsern, die Customizable Select nicht unterstützen?

Das Bedienelement baut elegant ab. Progressive Enhancement bedeutet, dass das Select voll nutzbar bleibt und die Kunden das native Pop-up erhalten, und weil <select> ein semantisches Element ist, bleiben die eingebauten Funktionen zur Barrierefreiheit erhalten. Die Session empfiehlt, vor der Auslieferung in nicht unterstützten Browsern und mit assistiven Werkzeugen zu testen.¹

Customizable Select streicht eine Abhängigkeit auf dieselbe Weise, wie es CSS Grid Lanes für Masonry-Layouts tun, und die Paarung ist bewusst gewählt: Session 315 selbst schließt damit, die Zuschauer auf die Grid-Lanes-Session zu verweisen, und die Demo-Website nutzt beide Funktionen gemeinsam.¹ Apple erweitert beständig, was schlichte HTML-Elemente leisten können, dieselbe Entwicklung, die das HTML-Model-Element auf Apple-Plattformen behandelt, und jede Drop-down-Bibliothek, die Sie nicht mehr ausliefern, stärkt die Argumentation im No-Build-Manifest. Der vollständige Knotenpunkt der Reihe ist die Apple Ecosystem Series.

References