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

Chrome 135; Safari 27 beta (junho de 2026); Firefox em desenvolvimento. Não é Baseline.

Chrome 135Edge 135Safari 27 betaFirefox no

Opta um `<select>` nativo por uma renderização totalmente estilizável: estilize o botão, o dropdown (`::picker(select)`), opções com conteúdo rico e a marca de seleção, mantendo o comportamento nativo de teclado e acessibilidade.

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: Os outros navegadores renderizam o select nativo; os filhos `<button>`/`<selectedcontent>` são ignorados.

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

Prompt

Estilize o `<select>` nativo com `appearance: base-select` tanto no elemento quanto em `::picker(select)`, coloque um `<button><selectedcontent></selectedcontent></button>` primeiro como gatilho, e estilize `option`, `option:checked` e `::checkmark`. Não o substitua por um listbox baseado em div; navegadores sem suporte mostram o select padrão.