Customizable Select: Endlich das echte <select> gestalten

Über das Standard-select-Element hinauszugehen, bedeutete bislang einen von zwei schlechten Kompromissen: schwergewichtige JavaScript-Bibliotheken oder Unmengen von div-Elementen, 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 bewahren, die es ohnehin schon bietet. Ab Safari 27 und Chrome 135 können Sie den Button, das Dropdown-Menü, das Häkchen und sogar den Pfeil neu gestalten und dann Bilder, Videos oder Emojis in Ihre Optionen einbauen.¹

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.¹
• Der Einstieg erfolgt über appearance: base-select, das zweimal angewendet wird: einmal auf das select selbst, um die Button-Gestaltung freizuschalten, und einmal auf ::picker(select), um sich vom nativen Dropdown-Menü abzumelden.¹
• Daneben kommen neue gestaltbare Bestandteile hinzu: ::picker-icon gestaltet den Pfeil über die content-Eigenschaft und eine width neu, ::checkmark auf dem option-Element tauscht das Häkchen auf dieselbe Weise aus, und die Pseudoklasse :open gestaltet den Button, während das Menü geöffnet ist.¹
• Optionen nehmen jede Art von Inhalt auf: Bilder, Videos, Emojis. Die Demo der Session legt ein SVG und ein Label in jede Option und gestaltet dann das gesamte Dropdown als CSS-Grid mit grid-template und gap.¹
• Ein <button> als erstes Kind von <select> zu platzieren, was in HTML zuvor nicht erlaubt war, ersetzt den eingebauten Button; das <selectedcontent>-Element darin zeigt den reichhaltigen Inhalt der ausgewählten Option an.²
• Progressive Enhancement gibt es gratis dazu: Browser ohne Unterstützung fallen 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 Fotografen-Portfolio-Demo an.

Die Session setzt zunächst bei dem an, was <select> bereits gut macht. Das Element bietet von Haus aus grundlegende Barrierefreiheit: Tastaturnavigation über die option-Elemente hinweg und 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 Steuerelement der Plattform, was den Nutzern eine bekannte Art der Navigation an die Hand gibt.¹

Der Haken war schon immer das Design. Setzen Sie das native Steuerelement auf eine gestaltete Website, wirkt es deplatziert; es weigert sich, sich einzufügen. Bisher bedeutete die Abhilfe, 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 Stufen, die die Session anhand eines echten Fotografen-Portfolio-Builds durchgeht: dem Button, dem Dropdown-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 select, den Sie anklicken, um das Menü anzuzeigen, und der erste Schritt ist eine einzige Deklaration:

select {
  appearance: base-select;
}

appearance: base-select tauscht die native Darstellung gegen eine kleinere Reihe von Basis-Styles aus, die Sie ändern können.¹ Der Effekt zeigt sich sofort durch Vererbung: Die Demo-Website setzt font-family: Gill Sans auf den body, und der select-Button erbt nun die body-Schriftart, sodass er zum Label daneben passt.¹ Von dort aus lassen sich Hintergrund, Rahmen und Innenabstand wie bei jedem anderen Element anpassen.

Zwei neue Ansatzpunkte vollenden den Button. Der Pfeil erhält seinen eigenen Selektor, ::picker-icon, der eine content-Eigenschaft für ein Ersatzglyph und eine width zur Größenangabe entgegennimmt. Die Pseudoklasse :open gestaltet den Button anders, während das Dropdown-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 zum Rest der Website passt, mit nur wenigen Zeilen CSS.¹

Das Dropdown gestalten: ::picker(select) und ::checkmark

Das Menü bringt eigene gestaltbare Bestandteile mit. Das Dropdown selbst sprechen Sie mit ::picker(select) auf dem select-Element an, das Häkchen mit ::checkmark auf dem option-Element.¹ Sich vom nativen Menü abzumelden erfordert appearance: base-select ein zweites Mal, nun 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 sauberen Ausgangszustand richtet die Demo die Abstände über padding und margin ein und kümmert sich dann um Rahmen und einen box-shadow auf dem Dropdown.¹ Um die aktuelle Auswahl hervorzuheben, kommt der bereits vorhandene :checked-Selektor zum Einsatz statt etwas Neuem: die ausgewählte Option fett, die anderen ausgegraut.¹

option:checked {
  font-weight: bold;
}

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

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

::checkmark funktioniert genau wie ::picker-icon: Setzen Sie content und eine width, und das Standard-Häkchen wird zu dem Glyph, das zu Ihrem Design passt.¹

Reichhaltige Inhalte in Optionen, als Grid angeordnet

Der größere Wandel ist 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 einem Label in jeder Option:

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

Beachten Sie den leeren alt-Text. Tim lässt den Alt-Text des Bildes bewusst leer, weil das Label „Flowers” sonst von Screenreadern zweimal angesagt würde.¹ Ein kleines Detail mit echter Konsequenz: Reichhaltige Optionen bleiben mit assistiver Technik genauso nutzbar wie schlichte.

Mit dem entfernten Standard-Häkchen hebt die Demo die ausgewählte Option stattdessen über den checked-Selektor und Farbänderungen hervor.¹ Ein Problem bleibt: Symbol-und-Label-Optionen machen das Dropdown sehr lang. Die Lösung greift auf bereits vorhandenes CSS zurück, weil der picker nun ein ganz normales Gestaltungsziel ist. 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 definiert die Anzahl der Zeilen und Spalten, während gap den Abstand zwischen den Grid-Zellen festlegt, und das Dropdown rastet in ein geordnetes Raster aus Kategorien ein.¹ Die Session endet mit einer Glanzleistung zum selben Thema: ein radialer Color Picker, 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, aber der Button, der die aktuelle Auswahl anzeigt, gibt nur Text wieder.¹ 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 Labels oder das Element, das genau für diese Aufgabe geschaffen wurde.¹

Die Ankündigung der Safari-27-Beta von WebKit nennt dieses Element: <selectedcontent>. Im Erst-Kind-Button des select platziert, zeigt es den Inhalt der aktuell ausgewählten Option an und kann direkt gestaltet werden.²

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

Das Element spiegelt den reichhaltigen Inhalt der ausgewählten Option wider, etwa das SVG neben dem Label „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 der, den Teams auf eigene Gefahr überspringen: das Design in Browsern zu prüfen, die Customizable Select nicht unterstützen. Die Antwort ist auf die beste Art langweilig. Progressive Enhancement greift, das Steuerelement bleibt nutzbar, und Kunden erhalten das native Pop-up.¹ Das select-Element wiederzuverwenden bedeutet, dass die Fallback-Geschichte bereits existiert, und weil <select> ein semantisches Element ist, überleben die eingebauten Barrierefreiheits-Funktionen 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.¹ Die abschließende Empfehlung 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 und mit assistiven Werkzeugen und lesen Sie das Best-Practices-Material von WebKit, damit die Oberfläche für alle funktioniert.¹

Wichtigste Erkenntnisse

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

Für barrierefreiheitsbewusste Teams: - Das semantische select behält Tastaturnavigation und Screenreader-Unterstützung ohne externe Bibliotheken, in unterstützten wie in nicht unterstützten Browsern gleichermaßen.¹ - Wenn Optionen sowohl ein Bild als auch ein Text-Label tragen, lassen Sie den Alt-Text des Bildes leer, damit Screenreader das Label nicht zweimal ansagen.¹ - Testen Sie vor dem Ausliefern mit Browsern ohne Unterstützung und mit assistiven Werkzeugen, gemäß der Checkliste der Session selbst.¹

Für Technical Leads, 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 ein JavaScript-Fallback ist nicht erforderlich.¹ - Bewerten Sie es jetzt in Safari Technology Preview oder Safari Beta und wägen Sie es gegen die Dropdown-Bibliothek ab, die derzeit in Ihrem Bundle steckt.¹

FAQ

Was ist Customizable Select?

Customizable Select ist eine Reihe von HTML- und CSS-Fähigkeiten, die das Safari-Team auf der WWDC 2026 vorgestellt hat und die mit Safari 27 und Chrome 135 beginnen, und die das bereits vorhandene <select>-Element vollständig anpassbar machen. Sie gestalten Button, Dropdown-Menü, Pfeil und Häkchen mit CSS und setzen reichhaltige Inhalte in die Optionen, während die eingebaute Barrierefreiheit des Elements erhalten bleibt.¹

Wie melde ich mich für Customizable Select an?

Wenden Sie appearance: base-select an zwei Stellen an: auf dem select-Element selbst, was die native Button-Darstellung durch eine kleinere Reihe von Basis-Styles ersetzt, und auf ::picker(select), was das Dropdown-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 stellt fest, dass Sie jede Art von Inhalt in Optionen setzen können: Bilder, Videos, Emojis. Die Demo verwendet ein SVG und ein Text-Label pro Option, mit leerem Alt-Text des Bildes, damit Screenreader das Label nur einmal ansagen, und ordnet das Menü als CSS-Grid mit grid-template und gap an.¹

Was ist das selectedcontent-Element?

<selectedcontent> ist das Element, das den reichhaltigen Inhalt der aktuell ausgewählten Option im Button des select anzeigt. Customizable Select erlaubt ein <button> als erstes Kind von <select>, was in HTML zuvor nicht erlaubt war; ein <selectedcontent> in diesem Button zu platzieren spiegelt den Inhalt der ausgewählten Option wider, etwa ein SVG neben seinem Label, und das Element kann direkt gestaltet werden.¹²

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

Das Steuerelement verschlechtert sich elegant. Progressive Enhancement bedeutet, dass das select voll nutzbar bleibt und Kunden das native Pop-up erhalten, und weil <select> ein semantisches Element ist, bleiben die eingebauten Barrierefreiheits-Funktionen erhalten. Die Session empfiehlt, vor dem Ausliefern in nicht unterstützten Browsern und mit assistiven Werkzeugen zu testen.¹

Customizable Select löscht eine Abhängigkeit auf dieselbe Weise, wie es CSS Grid Lanes für Masonry-Layouts tut, und die Paarung ist Absicht: Session 315 selbst schließt damit, dass sie die Zuschauer auf die Grid-Lanes-Session verweist, und die Demo-Website nutzt beide Funktionen zusammen.¹ Apple erweitert beständig, was schlichte HTML-Elemente leisten können, dieselbe Entwicklung, die das HTML-model-Element auf Apple-Plattformen behandelt, und jede Dropdown-Bibliothek, die Sie nicht mehr ausliefern, stärkt das Argument des No-Build-Manifests. Der vollständige Serien-Hub ist die Apple Ecosystem Series.

Quellen