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

Chrome 135; Safari 27 beta (June 2026); Firefox in development. Not Baseline.

Chrome 135Edge 135Safari 27 betaFirefox no

Opts a native `<select>` into fully stylable rendering: style the button, the dropdown (`::picker(select)`), options with rich content, and the checkmark, while keeping native keyboard and accessibility behaviour.

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: Other browsers render the native select; the `<button>`/`<selectedcontent>` children are ignored.

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

Prompt

Style the native `<select>` with `appearance: base-select` on both the element and `::picker(select)`, put a `<button><selectedcontent></selectedcontent></button>` first for the trigger, and style `option`, `option:checked` and `::checkmark`. Do not replace it with a div-based listbox; browsers without support show the default select.