APIs de la web, hoyLaboratorio · Alex Harto

Customizable select

Por fin, un <select> que se puede diseñar entero sin perder accesibilidad.

En tu navegador: comprobando…Revisado 1 oct 2026

Con appearance: base-select, el select y su desplegable (::picker(select)) aceptan cualquier estilo y las opciones admiten contenido: iconos, colores, texto secundario. <selectedcontent> repite la opción elegida dentro del botón, y ::checkmark y ::picker-icon se pueden cambiar.

Chrome y Edge desde la 135 y Safari desde la 27 (septiembre de 2026). Firefox lo tiene tras una flag desde la 149, sin fecha prevista. Donde no hay soporte, se ve un select normal, así que se puede usar ya.

Para qué sirve

  • Selectores de idioma, país o moneda con banderas o iconos
  • Selectores de color o material con muestras
  • Formularios con el estilo de tu sistema de diseño

Demo

Dos <select> de verdad: se envían con el formulario, se manejan con el teclado y los lectores de pantalla los anuncian como siempre. Solo cambia el CSS.

Compatibilidad

Disponibilidad limitada
FunciónEscritorioMóvil
ChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
appearance: base-select135Chrome: 135 135Edge: 135 149flagFirefox: 149 flag27Safari: 27 135Chrome: 135 —Firefox: No27Safari: 27
<selectedcontent>135Chrome: 135 135Edge: 135 —Firefox: No27Safari: 27 135Chrome: 135 —Firefox: No27Safari: 27

Compatibilidad generada en cada publicación desde MDN browser-compat-data 8.1.3 (24 sep 2026) · web-features 3.40.0 · revisión manual: 1 oct 2026

Código mínimo

<!doctype html>
<meta charset="utf-8">
<title>Customizable select · ejemplo mínimo</title>
<style>
  body { font: 16px system-ui; padding: 2rem; }
  /* Activa el modo personalizable en el select y en su desplegable */
  select, ::picker(select) { appearance: base-select; }
  select { padding: 8px 12px; border: 1px solid #999; border-radius: 8px; }
  ::picker(select) { border: 1px solid #999; border-radius: 8px; padding: 4px; }
  option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; }
  option:checked { background: #f3e2d6; }
  option::checkmark { content: '✓'; }
  select:open::picker-icon { rotate: 180deg; }
  .dot { width: 14px; height: 14px; border-radius: 50%; }
</style>
<label for="material">Material</label>
<!-- Sin soporte, es un select normal: las opciones se ven como texto -->
<select id="material">
  <button><selectedcontent></selectedcontent></button>
  <option value="nogal"><span class="dot" style="background:#6b4428"></span> Nogal</option>
  <option value="marmol"><span class="dot" style="background:#e9e4da"></span> Mármol</option>
  <option value="laton"><span class="dot" style="background:#c9a25a"></span> Latón</option>
</select>
Abrir el ejemplo ↗apis-snippets/customizable-select/ · Los repositorios se publicarán pronto.

Novedades

  1. Safari 27 lo activa, con ::picker-icon, ::checkmark y contenido rico en las opciones.
  2. Mozilla anuncia que empieza a implementarlo (Intent to Prototype).

Ten en cuenta

  1. El <button> tiene que ser el primer hijo del select.
  2. Algunos frameworks eliminan ese marcado o rompen la hidratación del servidor; pruébalo en el tuyo.
  3. No está en Interop 2026: Firefox no tiene fecha.

Más información

Fuentes