Customizable Select: al fin puedes dar estilo al <select> real

Ir más allá del elemento select predeterminado solía implicar uno de dos malos tratos: librerías pesadas de JavaScript o montones de elementos div, con la accesibilidad volviéndose complicada en ambos casos.¹ En la WWDC 2026, el equipo de Safari mostró la salida: customizable select, un conjunto de adiciones de HTML y CSS que hacen que el elemento <select> preexistente sea completamente estilizable mientras conserva la semántica, la navegación por teclado y el soporte para lectores de pantalla que ya proporciona. A partir de Safari 27 y Chrome 135, puedes reestilizar el button, el menú desplegable, la marca de verificación e incluso la flecha, y luego poner imágenes, videos o emojis dentro de tus options.¹

TL;DR

• Customizable select da estilo al elemento <select> real solo con HTML y CSS, reemplazando las librerías de JavaScript y las pilas de div a las que recurrían antes los desarrolladores. La disponibilidad comienza en Safari 27 y Chrome 135.¹
• La activación es appearance: base-select, aplicada dos veces: una en el propio select para habilitar el estilizado del button, y otra en ::picker(select) para optar por salir del menú desplegable nativo.¹
• Junto a ella llegan nuevas partes estilizables: ::picker-icon reestiliza la flecha mediante la propiedad content y un width, ::checkmark en el elemento option intercambia la marca de la misma manera, y la pseudoclase :open da estilo al button mientras el menú está abierto.¹
• Las options aceptan cualquier tipo de contenido: imágenes, videos, emojis. La demo de la sesión coloca un SVG y una etiqueta dentro de cada option, y luego dispone todo el desplegable como una cuadrícula de CSS con grid-template y gap.¹
• Colocar un <button> como primer hijo de <select>, algo que antes no estaba permitido en HTML, reemplaza el button integrado; el elemento <selectedcontent> dentro de él muestra el contenido enriquecido de la option seleccionada.²
• La mejora progresiva viene gratis: los navegadores sin soporte recurren al pop-up nativo, y el elemento select semántico conserva su accesibilidad integrada en todas partes.¹

De la sopa de div de vuelta al HTML semántico

Tim, ingeniero de Safari, aplica appearance: base-select a una demo de portafolio de fotógrafo a partir del minuto 2:48.

El planteamiento de la sesión parte de lo que <select> ya hace bien. El elemento ofrece accesibilidad básica desde el primer momento: navegación por teclado entre los elementos option y un comportamiento sólido con lectores de pantalla, todo sin librerías externas.¹ En las plataformas de Apple el renderizado nativo es el familiar button desplegable, y combina con todos los demás controles de la plataforma, lo que les da a los usuarios una forma conocida de navegarlo.¹

El problema siempre fue el diseño. Coloca el control nativo en un sitio estilizado y desentona; se niega a integrarse. Hasta ahora la solución implicaba abandonar el elemento por completo en favor de un widget de JavaScript o un montón de div, y reconstruir la accesibilidad a mano. Customizable select conserva el elemento y te entrega el estilizado, en tres etapas que la sesión recorre sobre una construcción real de portafolio de fotógrafo: el button, el menú desplegable y, finalmente, el contenido que va más allá del texto plano.¹

Dar estilo al button: base-select, ::picker-icon y :open

El button es la parte del select en la que haces clic para mostrar el menú, y el primer paso es una sola declaración:

select {
  appearance: base-select;
}

appearance: base-select cambia el renderizado nativo por un conjunto más reducido de estilos base que puedes modificar.¹ El efecto aparece de inmediato a través de la herencia: el sitio de la demo define font-family: Gill Sans en el body, y el button del select ahora hereda la fuente del body, combinando con la etiqueta que tiene al lado.¹ A partir de ahí, el fondo, el borde y el padding se ajustan como en cualquier otro elemento.

Dos nuevos puntos de control rematan el button. La flecha obtiene su propio selector, ::picker-icon, que admite una propiedad content para un glifo de reemplazo y un width para dimensionarlo. La pseudoclase :open da estilo al button de forma distinta mientras el menú desplegable está abierto:

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

El veredicto de la sesión sobre el resultado: un select que combina con el resto del sitio en solo unas pocas líneas de CSS.¹

Dar estilo al desplegable: ::picker(select) y ::checkmark

El menú trae sus propias partes estilizables. Te diriges al desplegable en sí con ::picker(select) sobre el elemento select, y a la marca con ::checkmark sobre el elemento option.¹ Optar por salir del menú nativo requiere appearance: base-select por segunda vez, ahora en el picker:

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

Con el lienzo en blanco listo, la demo organiza el espaciado con padding y margin, y luego maneja los bordes y un box-shadow en el desplegable.¹ Resaltar la elección actual usa el selector preexistente :checked en lugar de algo nuevo: poner en negrita la option marcada y atenuar las demás.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark funciona exactamente igual que ::picker-icon: define content y un width, y la marca predeterminada se convierte en el glifo que mejor se ajuste a tu diseño.¹

Contenido enriquecido en las options, dispuesto como una cuadrícula

El cambio mayor es lo que va dentro de <option>. La sesión es explícita: funciona cualquier tipo de contenido, imágenes, videos, emojis, lo que quieras.¹ La demo construye un navegador de categorías para los temas más populares del fotógrafo, con un símbolo SVG y una etiqueta dentro de cada option:

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

Fíjate en el alt vacío. Tim deja el texto alternativo de la imagen vacío de forma deliberada, porque de lo contrario la etiqueta “Flowers” se anunciaría dos veces en los lectores de pantalla.¹ Pequeño detalle, consecuencia real: las options enriquecidas siguen siendo tan usables con tecnología de asistencia como las simples.

Con la marca de verificación predeterminada eliminada, la demo destaca la option seleccionada mediante el selector checked y cambios de color.¹ Queda un problema: las options de símbolo y etiqueta hacen que el desplegable sea muy largo. La solución reutiliza CSS que ya existe, porque el picker es ahora un objetivo de estilizado ordinario. Una disposición en cuadrícula reconfigura todo el menú:

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template define la cantidad de filas y columnas, mientras que gap define el espaciado entre las celdas de la cuadrícula, y el desplegable encaja en una cuadrícula organizada de categorías.¹ La sesión termina con un broche sobre el mismo tema: un selector de color radial, construido por completo con customizable select.¹

El button intercambiable y selectedcontent

Queda una brecha en el navegador de categorías: los símbolos SVG viven en las options, pero el button que muestra la selección actual solo presenta texto.¹ Customizable select cierra la brecha al permitirte reemplazar el button integrado, colocando un elemento <button> como primer hijo del <select>. Poner un button dentro de un select antes no estaba permitido en HTML; ahora acepta contenido personalizado, como etiquetas, o como el elemento diseñado exactamente para esta tarea.¹

El anuncio de la beta de Safari 27 de WebKit nombra ese elemento: <selectedcontent>. Colocado dentro del button que es primer hijo del select, muestra el contenido de la option actualmente seleccionada y puede estilizarse directamente.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

El elemento refleja el contenido enriquecido que pertenezca a la option seleccionada, como el SVG junto a la etiqueta “Everything” en la demo, de modo que el button finalmente muestra el mismo lenguaje visual que el menú que abre.¹²

La mejora progresiva viene integrada

El último paso de la sesión es el que los equipos se saltan a su propio riesgo: comprobar el diseño en navegadores que no admiten customizable select. La respuesta es del mejor tipo de aburrida. La mejora progresiva entra en acción, el control sigue siendo usable y los clientes obtienen el pop-up nativo.¹ Reutilizar el elemento select significa que la historia de respaldo ya existe, y como <select> es un elemento semántico, las funciones de accesibilidad integradas sobreviven en todos los navegadores.¹

La disponibilidad es concreta: Safari 27 y Chrome 135. Para probar las funciones ahora, descarga Safari Technology Preview o Safari Beta.¹ La orientación final de la sesión es práctica: revisa la demo en webkit.org, estiliza algo simple en tu propio sitio, prueba en navegadores sin soporte y con herramientas de asistencia, y lee el material de mejores prácticas de WebKit para que la interfaz funcione para todos.¹

Lo que el equipo de Safari añadió en los labs

Algunas cosas de los labs de la WWDC completan el panorama, en especial hacia dónde se dirige customizable select.

El punto del roadmap a vigilar es appearance: base, la misma activación generalizada a todos los controles de formulario en lugar de solo a <select>. El valor existe en la especificación de CSS pero todavía no llega a ningún sitio.³ En el lab, el panel dijo que “no se lanza ahora” y que llegará más adelante, y que la discusión de la especificación sigue abiertamente sin resolverse; los panelistas no estuvieron de acuerdo en vivo sobre cómo debería verse siquiera la base sin estilo.⁴ Los objetivos de diseño declarados son lo bastante claros: heredar al máximo de los estilos de la página, sin magia de diseño, y un renderizado base idéntico y una estructura de DOM idéntica entre motores.⁴

La historia explica por qué customizable select reutiliza <select> en absoluto. La propuesta original era un elemento <selectmenu> totalmente nuevo. Un ingeniero de estándares de WebKit impulsó reutilizar <select> en su lugar, para que los navegadores sin soporte conserven el respaldo nativo gratis, que es exactamente la historia de mejora progresiva de arriba.⁴

Una regla firme salió del panel: conserva siempre contenido de texto en tus options. Las options solo con iconos renderizan un pop-up nativo en blanco en los navegadores sin soporte, lo que deja varados a los usuarios en motores que no lo admiten.⁴

Puntos Clave

Para desarrolladores frontend: - Actívalo con appearance: base-select en el elemento select para el button, y de nuevo en ::picker(select) para el desplegable; luego da estilo al fondo, el borde, el padding, el espaciado y el box-shadow como en cualquier otro elemento.¹ - Intercambia la flecha con ::picker-icon y la marca con ::checkmark, ambas mediante content más width; da estilo al estado abierto con :open; resalta la selección con el selector preexistente :checked.¹ - Pon HTML real dentro de <option> (imágenes, videos, emojis) y reconfigura el menú con CSS existente, como una cuadrícula de grid-template más gap; reemplaza el button integrado con un <button> de primer hijo que contenga <selectedcontent>.¹²

Para equipos enfocados en la accesibilidad: - El select semántico conserva la navegación por teclado y el soporte para lectores de pantalla sin librerías externas, tanto en navegadores compatibles como incompatibles.¹ - Cuando las options llevan tanto una imagen como una etiqueta de texto, deja el texto alternativo de la imagen vacío para que los lectores de pantalla no anuncien la etiqueta dos veces.¹ - Prueba con navegadores que carezcan de soporte y con herramientas de asistencia antes de lanzar, según la propia lista de verificación de la sesión.¹

Para líderes técnicos que planifican el despliegue: - Trata customizable select como una mejora progresiva: Safari 27 y Chrome 135 obtienen el diseño personalizado, todos los demás obtienen el pop-up nativo, y no se requiere ningún respaldo de JavaScript.¹ - Evalúalo ahora en Safari Technology Preview o Safari Beta, y compáralo con la librería de desplegables que ahora mismo está en tu bundle.¹

Preguntas frecuentes

¿Qué es customizable select?

Customizable select es un conjunto de capacidades de HTML y CSS, presentadas por el equipo de Safari en la WWDC 2026 y a partir de Safari 27 y Chrome 135, que hace que el elemento <select> preexistente sea completamente personalizable. Das estilo al button, al menú desplegable, a la flecha y a la marca de verificación con CSS, y pones contenido enriquecido dentro de las options, mientras conservas la accesibilidad integrada del elemento.¹

¿Cómo activo customizable select?

Aplica appearance: base-select en dos lugares: en el propio elemento select, lo que reemplaza el renderizado nativo del button por un conjunto más reducido de estilos base, y en ::picker(select), lo que hace que el menú desplegable opte por salir de su renderizado nativo para que puedas estilizarlo libremente.¹

¿Puedo poner imágenes u otro HTML dentro de los elementos option?

Sí. La sesión afirma que puedes poner cualquier tipo de contenido dentro de las options: imágenes, videos, emojis. La demo usa un SVG y una etiqueta de texto por option, con el texto alternativo de la imagen vacío para que los lectores de pantalla anuncien la etiqueta una sola vez, y dispone el menú como una cuadrícula de CSS usando grid-template y gap.¹

¿Qué es el elemento selectedcontent?

<selectedcontent> es el elemento que muestra el contenido enriquecido de la option actualmente seleccionada dentro del button del select. Customizable select permite un <button> como primer hijo de <select>, algo que antes no estaba permitido en HTML; colocar <selectedcontent> dentro de ese button refleja el contenido de la option seleccionada, como un SVG junto a su etiqueta, y el elemento puede estilizarse directamente.¹²

¿Qué ocurre en los navegadores que no admiten customizable select?

El control se degrada con elegancia. La mejora progresiva significa que el select sigue siendo totalmente usable y los clientes obtienen el pop-up nativo, y como <select> es un elemento semántico, las funciones de accesibilidad integradas permanecen. La sesión recomienda probar en navegadores incompatibles y con herramientas de asistencia antes de lanzar.¹

Customizable select elimina una dependencia de la misma forma en que CSS Grid Lanes lo hace para los diseños de tipo masonry, y el emparejamiento es deliberado: la propia sesión 315 cierra señalando a los espectadores la sesión de Grid Lanes, y el sitio de la demo usa ambas funciones juntas.¹ Apple sigue ampliando lo que pueden hacer los elementos HTML simples, la misma trayectoria que se cubre en el elemento model de HTML en las plataformas de Apple, y cada librería de desplegables que dejas de enviar refuerza el argumento de el manifiesto no-build. El centro completo de la serie es la Serie del Ecosistema de Apple.

Referencias