Styling von Select-Elementen mit modernem CSS

Das <select>-Element war schon immer eines der hartnäckigsten Formularelemente beim Styling. Im Gegensatz zu Inputs oder Buttons wurde es historisch über UI-Komponenten auf Betriebssystemebene gerendert, was bedeutete, dass CSS nur an der Oberfläche kratzen konnte. Diese Einschränkung führte dazu, dass Entwickler auf Workarounds zurückgriffen, die auch heute noch im Produktionscode üblich sind.

Dieser Artikel behandelt beide Ansätze: die weithin unterstützte Legacy-Technik mit appearance: none und das neuere appearance: base-select-Modell, das derzeit in modernen Chromium-Browsern entsteht.

Warum native <select>-Elemente sich CSS-Styling widersetzen

Browser haben das Rendering von <select>-Elementen traditionell an das Betriebssystem übergeben. Das Ergebnis waren inkonsistente Box-Größen, Font-Rendering und Dropdown-Pfeil-Styles über Chrome, Firefox, Safari und Edge hinweg, ohne zuverlässige Möglichkeit, diese allein durch CSS zu vereinheitlichen.

Die geöffnete Dropdown-Liste (das Options-Panel) bleibt auch heute noch in den meisten Browsern weitgehend unstylebar. Das ist eine harte Einschränkung, die Sie im Hinterkopf behalten sollten, bevor Sie Ihren Ansatz wählen.

Der Legacy-Ansatz: appearance: none mit einem Wrapper-Element

Die am weitesten verbreitete CSS-Styling-Technik für Select-Elemente umfasst drei Schritte:

1. Entfernen Sie das native Erscheinungsbild mit appearance: none.
2. Umschließen Sie das <select> mit einem Container-Element, das Sie frei stylen können.
3. Fügen Sie einen benutzerdefinierten Dropdown-Pfeil mittels clip-path oder einem Hintergrund-SVG hinzu.

:root {
  --select-border: #777;
  --select-arrow: var(--select-border);
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  background-color: #fff;
}

select,
.select::after {
  grid-area: select;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  pointer-events: none;
}

Der CSS-Grid-Überlappungs-Trick hier ist es wert, verstanden zu werden: Indem sowohl das <select> als auch das ::after-Pseudo-Element demselben benannten Grid-Bereich zugewiesen werden, werden sie gestapelt, sodass der benutzerdefinierte Pfeil visuell oben liegt, ohne das Klickverhalten des nativen Controls zu beeinträchtigen.

Für Fokus-Zustände ist zu beachten, dass outline auf dem nativen Select-Element sich nicht zuverlässig über Browser hinweg verhält. Eine gängige Lösung ist das Hinzufügen eines <span class="focus">-Geschwister-Elements und dessen Targeting mit select:focus + .focus unter Verwendung von position: absolute, um einen sichtbaren Fokus-Ring zu zeichnen.

Dieser Ansatz funktioniert in allen modernen Browsern und bewahrt die native Barrierefreiheit – Tastaturnavigation, Screenreader-Ansagen und Formularübermittlung verhalten sich alle wie erwartet.

Der moderne Ansatz: appearance: base-select

Chrome 135 und Edge 135 haben ein neues Opt-in-Modell eingeführt, das interne Teile von <select> für direktes CSS-Styling zugänglich macht. Sie aktivieren es folgendermaßen:

select,
select::picker(select) {
  appearance: base-select;
}

Dies ermöglicht mehrere neue Styling-Targets:

• ::picker(select) — das Dropdown-Panel, das die Optionen enthält
• ::picker-icon — der Dropdown-Pfeil-Indikator
• option::checkmark — das Häkchen, das neben der ausgewählten Option angezeigt wird
• :open — eine Pseudo-Klasse, die aktiv ist, während der Picker geöffnet ist
• option:checked — zielt auf die aktuell ausgewählte Option ab

Mit base-select können Sie das Picker-Dropdown direkt stylen, es animiert öffnen und schließen und das <selectedcontent>-Element verwenden, um den Inhalt der ausgewählten Option in das geschlossene Control zu spiegeln. Unterstützende Browser erlauben auch umfangreicheres Markup innerhalb von Optionen, wenn das anpassbare Select-Modell aktiviert ist.

Browser-Unterstützung: derzeit hauptsächlich auf Chromium-basierte Browser beschränkt. Prüfen Sie den aktuellen Status auf Can I Use.

Verwenden Sie @supports, um es als Progressive Enhancement anzuwenden:

@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }
}

Welchen Ansatz sollten Sie verwenden?

Verwenden Sie die appearance: none-Wrapper-Technik als Ihre Baseline. Sie funktioniert überall, bewahrt die Barrierefreiheit und gibt Ihnen solide Kontrolle über den geschlossenen Zustand des Select-Elements. Legen Sie appearance: base-select mit @supports für Browser darüber, die es unterstützen.

Fazit

Das Anpassen von HTML-Select-Dropdowns mit CSS ist nicht länger eine Wahl zwischen „volle Kontrolle mit JavaScript” oder „Browser-Defaults akzeptieren”. Das appearance: none-Wrapper-Pattern bleibt die verlässliche browserübergreifende Grundlage, während appearance: base-select die Tür zum Styling des Dropdown-Panels öffnet, das Einbetten umfangreicherer Inhalte in Optionen ermöglicht und den Picker animierbar macht. Die Lücke zwischen diesen beiden Extremen schließt sich, nur noch nicht einheitlich über alle Browser hinweg. Beginnen Sie mit der Legacy-Technik, legen Sie die moderne progressiv darüber, und Sie werden die breiteste Nutzerbasis mit der geringsten Reibung abdecken.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..