Customizable <select> (appearance: base-select, ::picker(select))

Chrome 135; Safari 27 Beta (Juni 2026); Firefox in Entwicklung. Nicht Baseline.

Chrome 135Edge 135Safari 27 betaFirefox no

Schaltet ein natives `<select>` auf vollständig stylbares Rendering um: style den Button, das Dropdown (`::picker(select)`), Optionen mit Rich Content und das Häkchen, während natives Tastatur- und Barrierefreiheitsverhalten erhalten bleibt.

CSS

.fx-061,.fx-061::picker(select) {
  appearance: base-select
}
.fx-061 {
  padding: 8px 12px;
  border: 1px solid #bbb;
  border-radius: 8px;
  font: 14px system-ui;
  background: #fff
}
.fx-061::picker(select) {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px #0002
}
.fx-061 option {
  padding: 8px 10px;
  border-radius: 6px
}
.fx-061 option:checked {
  background: #2563eb;
  color: #fff
}
.fx-061 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<select class="fx-061">
  <button><selectedcontent></selectedcontent></button>
  <option value="a">Alpha</option><option value="b">Beta</option><option value="c">Gamma</option>
</select>

Fallback: Andere Browser rendern das native Select; die `<button>`/`<selectedcontent>`-Kinder werden ignoriert.

Quelle: webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/

Prompt

Style das native `<select>` mit `appearance: base-select` sowohl auf dem Element als auch auf `::picker(select)`, setze ein `<button><selectedcontent></selectedcontent></button>` als Erstes für den Auslöser und style `option`, `option:checked` und `::checkmark`. Ersetze es nicht durch eine div-basierte Listbox; Browser ohne Unterstützung zeigen das Standard-Select.