0Pricing
HTML Academy · Lektion

Das selectlist-Element

Passen Sie Dropdown-Steuerelemente mit dem vorgeschlagenen selectlist-Element an

Das selectlist-Element ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Die lang bestehende Einschränkung

Das <select>-Element ist eines der wenigen Formularelemente, dessen Erscheinungsbild nicht angepasst werden kann. Jede darauf angewendete CSS-Regel (eigene Rahmen, Schriftarten, Styles für Optionen) wird vom Browser ignoriert. Dadurch sind Tausende von Bibliotheken für „eigene Dropdowns“ entstanden, die natives Verhalten nachbilden, nur um gestylte Optionen zu ermöglichen.

Was selectlist ist

<selectlist> (auch als <selectmenu> bezeichnet) ist ein natives HTML-Element, das als anpassbare Alternative zu <select> entwickelt wurde. Es verwendet dasselbe grundlegende Modell – einen Button als Auslöser und eine Liste von Optionen –, stellt aber jeden Teil für die Anpassung mit CSS bereit.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Teile, die Sie stylen können

selectlist stellt den Button (den Auslöser im geschlossenen Zustand), die Listbox (das geöffnete Dropdown) und die Optionen bereit. Mit CSS-Pseudoelementen (::part(button), ::part(listbox)) können Sie jeden Teil stylen, ohne das native Verhalten zu beeinträchtigen.

Optionen anpassen

Optionen innerhalb von selectlist können beliebige Inhalte enthalten – Icons, Beschreibungen und eigene Layouts, nicht nur Text. Der Browser übernimmt weiterhin die Auswahl, die Tastaturnavigation und die Fokusverwaltung, während Sie das Erscheinungsbild frei bestimmen können.

Integriertes Verhalten bleibt erhalten

selectlist behält alle Stärken von <select> bei: Tastaturnavigation (Pfeiltasten, inkrementelle Suche), Ansagen für Screenreader, Teilnahme an Formularen und Fokusverwaltung. Sie übernehmen das barrierefreie Verhalten und können darauf die UI gestalten.

Eigener Button

Stellen Sie einen Slot für den Auslöser bereit: <button slot="button">Choose fruit <svg>...</svg></button>. Der Button kann vollständig von Ihnen gestaltet werden – ersetzen Sie das native Dreieck durch ein eigenes Icon, fügen Sie Beschriftungen hinzu oder ändern Sie die Farben. Der Browser übernimmt weiterhin das Öffnen und Schließen.

Teilnahme an Formularen

selectlist nimmt genauso wie select an der Übermittlung von Formularen teil: Es hat ein name-Attribut und einen Wert und wird mit dem Formular übermittelt. Die serverseitige Verarbeitung ist identisch. Für die meisten Anwendungsfälle von select kann es auf Markup-Ebene direkt ersetzt werden.

Browserunterstützung

selectlist ist eine Funktion in einem frühen Entwicklungsstadium. Im Jahr 2026 wird sie in Chromium-basierten Browsern hinter Flags oder in eingeschränkter Form ausgeliefert. Firefox und Safari unterstützen sie noch nicht. Für den produktiven Einsatz ist für nicht unterstützende Browser ein Fallback auf ein reguläres <select> erforderlich.

Schwierigkeit eines Polyfills

Ein vollständig barrierefreies eigenes Dropdown zu implementieren, das sich wie das native Element verhält, ist schwierig – insbesondere wegen Fokusfallen, Tastaturnavigation, Screenreader-Integration und Formularteilnahme. Bibliotheken wie Downshift, Combobox und react-aria erledigen diese Arbeit mit Tausenden Codezeilen. selectlist ersetzt all das durch ein einziges Element.

Wann Sie es einsetzen

Für interne Anwendungen oder Deployments ausschließlich für Chromium spart selectlist schon heute erheblichen Code. Bei öffentlichen Websites mit breiter Zielgruppe sollten Sie auf die Unterstützung durch Firefox und Safari warten oder eine Wrapper-Bibliothek verwenden, die bei vorhandener Unterstützung selectlist nutzt und andernorts auf ein benutzerdefiniertes React-/Vue-Dropdown zurückfällt.

Ablösungsplan

Sobald selectlist überall verfügbar ist, ist damit zu rechnen, dass viele Bibliotheken für benutzerdefinierte Dropdowns als veraltet gekennzeichnet werden oder zu dünnen Wrappern um das native Element werden. Verfolgen Sie den Standardisierungsprozess; die API wurde bereits mehrfach überarbeitet und könnte sich vor der endgültigen Standardisierung weiterentwickeln.

Auswirkungen auf das Design

Designer können jetzt pixelgenaue Dropdowns festlegen, ohne den Vorbehalt „Das Design sieht so aus, aber das Dropdown wird im Browser anders dargestellt“. selectlist beseitigt eine der ältesten visuellen Inkonsistenzen zwischen Design-Mockups und ausgeliefertem HTML.

Wissenscheck

Warum ist das selectlist-Element wichtig – welche Einschränkung des nativen