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

Chrome 135; Safari 27 beta (junio de 2026); Firefox en desarrollo. No es Baseline.

Chrome 135Edge 135Safari 27 betaFirefox no

Activa en un `<select>` nativo el renderizado totalmente estilizable: estiliza el botón, el desplegable (`::picker(select)`), opciones con contenido enriquecido y la marca de verificación, conservando el comportamiento nativo de teclado y accesibilidad.

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: Los demás navegadores renderizan el select nativo; los hijos `<button>`/`<selectedcontent>` se ignoran.

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

Prompt

Estiliza el `<select>` nativo con `appearance: base-select` tanto en el elemento como en `::picker(select)`, pon primero un `<button><selectedcontent></selectedcontent></button>` como disparador y estiliza `option`, `option:checked` y `::checkmark`. No lo sustituyas por un listbox hecho con divs; los navegadores sin soporte muestran el select por defecto.