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

Ir más allá del elemento select por defecto ha significado hasta ahora una de dos malas decisiones: bibliotecas de JavaScript pesadas o montones de elementos div, y en ambos casos la accesibilidad se volvía complicada.¹ En la WWDC 2026, el equipo de Safari mostró la salida: customizable select, un conjunto de añadidos a HTML y CSS que hace que el elemento <select> preexistente sea completamente estilizable, conservando a la vez la semántica, la navegación por teclado y la compatibilidad con lectores de pantalla que ya ofrece. A partir de Safari 27 y Chrome 135, puedes reestilizar el botón, el menú desplegable, la marca de verificación e incluso la flecha, y luego colocar imágenes, videos o emojis dentro de tus opciones.¹

TL;DR

• Customizable select da estilo al elemento <select> real solo con HTML y CSS, reemplazando las bibliotecas de JavaScript y las pilas de div a las que los desarrolladores recurrían antes. La disponibilidad comienza en Safari 27 y Chrome 135.¹
• La activación se hace con appearance: base-select, aplicado dos veces: una sobre el propio select para habilitar el estilo del botón, y otra sobre ::picker(select) para renunciar al menú desplegable nativo.¹
• Junto con esto llegan nuevas partes estilizables: ::picker-icon reestiliza la flecha mediante la propiedad content y un width, ::checkmark en el elemento option cambia la marca de la misma forma, y la pseudoclase :open da estilo al botón mientras el menú está abierto.¹
• Las opciones admiten cualquier tipo de contenido: imágenes, videos, emojis. La demostración de la sesión coloca un SVG y una etiqueta dentro de cada opción, y luego dispone todo el menú desplegable como una cuadrícula CSS con grid-template y gap.¹
• Colocar un <button> como primer hijo de <select>, algo que antes no se permitía en HTML, reemplaza el botón integrado; el elemento <selectedcontent> que va dentro muestra el contenido enriquecido de la opción seleccionada.²
• La mejora progresiva viene gratis: los navegadores sin compatibilidad recurren a la ventana emergente nativa, y el elemento select semántico conserva en todas partes su accesibilidad integrada.¹

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 enfoque de la sesión parte de lo que <select> ya hace bien. El elemento ofrece accesibilidad básica de fábrica: navegación por teclado entre los elementos option y un comportamiento sólido con lectores de pantalla, todo sin bibliotecas externas.¹ En las plataformas de Apple, el renderizado nativo es el familiar botón desplegable, y combina con todos los demás controles de la plataforma, lo que da a los usuarios una forma conocida de navegar por él.¹

El problema siempre ha sido el diseño. Coloca el control nativo en un sitio con estilo y desentona; se niega a integrarse. Hasta ahora, la solución implicaba abandonar el elemento por completo a 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 estilo, en tres etapas que la sesión recorre sobre la construcción real de un portafolio de fotógrafo: el botón, el menú desplegable y, por último, contenido que va más allá del texto plano.¹

Dar estilo al botón: base-select, ::picker-icon y :open

El botón 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 se nota de inmediato a través de la herencia: el sitio de demostración define font-family: Gill Sans en el body, y ahora el botón del select 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 enganche rematan el botón. La flecha tiene su propio selector, ::picker-icon, que toma una propiedad content para un glifo de reemplazo y un width para dimensionarlo. La pseudoclase :open da un estilo distinto al botón 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 apenas unas líneas de CSS.¹

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

El menú trae sus propias partes estilizables. Al menú desplegable en sí lo abordas con ::picker(select) sobre el elemento select, y a la marca con ::checkmark sobre el elemento option.¹ Renunciar al menú nativo requiere appearance: base-select por segunda vez, ahora sobre 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 una box-shadow en el menú desplegable.¹ Para resaltar la elección actual se usa el selector preexistente :checked en lugar de algo nuevo: poner en negrita la opción marcada y atenuar las demás en gris.¹

option:checked {
  font-weight: bold;
}

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

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

::checkmark funciona exactamente igual que ::picker-icon: defines content y un width, y la marca por defecto se convierte en el glifo que encaje con tu diseño.¹

Contenido enriquecido en las opciones, dispuesto como cuadrícula

El cambio más grande 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 con los temas más populares del fotógrafo, con un símbolo SVG y una etiqueta dentro de cada opción:

<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 los lectores de pantalla anunciarían dos veces la etiqueta «Flowers».¹ Un detalle pequeño con una consecuencia real: las opciones enriquecidas siguen siendo tan utilizables con tecnología de asistencia como las simples.

Con la marca de verificación por defecto eliminada, la demo resalta la opción seleccionada mediante el selector checked y cambios de color.¹ Queda un problema: las opciones con símbolo y etiqueta hacen que el menú desplegable sea muy largo. La solución reutiliza CSS que ya existe, porque ahora el picker es un objetivo de estilo común. 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 el número de filas y columnas, mientras que gap define el espacio entre las celdas de la cuadrícula, y el menú desplegable se acomoda en una cuadrícula organizada de categorías.¹ La sesión termina con un broche de oro sobre el mismo tema: un selector de color radial, construido por completo con customizable select.¹

El botón intercambiable y selectedcontent

Queda un hueco en el navegador de categorías: los símbolos SVG viven en las opciones, pero el botón que muestra la selección actual solo despliega texto.¹ Customizable select cierra el hueco al permitirte reemplazar el botón integrado, colocando un elemento <button> como primer hijo del <select>. Poner un botón dentro de un select no se permitía antes en HTML; ahora acepta contenido personalizado, como etiquetas, o como el elemento creado exactamente para esta tarea.¹

El anuncio de la beta de Safari 27 de WebKit nombra ese elemento: <selectedcontent>. Colocado dentro del botón primer hijo del select, muestra el contenido de la opción seleccionada en ese momento 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 cualquier contenido enriquecido que pertenezca a la opción seleccionada, como el SVG junto a la etiqueta «Everything» en la demo, de modo que el botón muestra por fin 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 aburrida en el mejor sentido. Entra en acción la mejora progresiva, el control sigue siendo utilizable y los clientes obtienen la ventana emergente nativa.¹ Reutilizar el elemento select significa que el plan 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 mismo, descarga Safari Technology Preview o Safari Beta.¹ La recomendación de cierre de la sesión es práctica: revisa la demo en webkit.org, da estilo a algo sencillo en tu propio sitio, prueba en navegadores sin compatibilidad y con herramientas de asistencia, y lee el material de buenas prácticas de WebKit para que la interfaz funcione para todos.¹

Conclusiones clave

Para desarrolladores frontend: - Activa con appearance: base-select en el elemento select para el botón, y de nuevo en ::picker(select) para el menú desplegable; luego da estilo al fondo, el borde, el padding, el espaciado y la box-shadow como en cualquier otro elemento.¹ - Cambia la flecha con ::picker-icon y la marca con ::checkmark, ambos 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 grid-template más gap; reemplaza el botón integrado por un <button> primer hijo que contenga <selectedcontent>.¹²

Para equipos enfocados en la accesibilidad: - El select semántico conserva la navegación por teclado y la compatibilidad con lectores de pantalla sin bibliotecas externas, tanto en navegadores compatibles como en los que no lo son.¹ - Cuando las opciones llevan tanto una imagen como una etiqueta de texto, deja vacío el texto alternativo de la imagen para que los lectores de pantalla no anuncien la etiqueta dos veces.¹ - Prueba con navegadores sin compatibilidad 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 reciben el diseño personalizado, todos los demás reciben la ventana emergente nativa y no se requiere ningún respaldo en JavaScript.¹ - Evalúalo ahora en Safari Technology Preview o Safari Beta, y compáralo con la biblioteca de menú desplegable que tienes actualmente en tu bundle.¹

Preguntas frecuentes

¿Qué es customizable select?

Customizable select es un conjunto de capacidades de HTML y CSS, presentado por el equipo de Safari en la WWDC 2026 y disponible a partir de Safari 27 y Chrome 135, que hace que el elemento <select> preexistente sea completamente personalizable. Das estilo al botón, el menú desplegable, la flecha y la marca de verificación con CSS, y colocas contenido enriquecido dentro de las opciones, conservando 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 botón por un conjunto más reducido de estilos base, y en ::picker(select), lo que hace que el menú desplegable renuncie a su renderizado nativo para que puedas darle estilo con libertad.¹

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

Sí. La sesión afirma que puedes colocar cualquier tipo de contenido dentro de las opciones: imágenes, videos, emojis. La demo usa un SVG y una etiqueta de texto por opción, 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 CSS usando grid-template y gap.¹

¿Qué es el elemento selectedcontent?

<selectedcontent> es el elemento que muestra el contenido enriquecido de la opción seleccionada en ese momento dentro del botón del select. Customizable select permite un <button> como primer hijo de <select>, algo que antes no se permitía en HTML; colocar <selectedcontent> dentro de ese botón refleja el contenido de la opción 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 implica que el select sigue siendo plenamente utilizable y los clientes obtienen la ventana emergente nativa, y como <select> es un elemento semántico, las funciones de accesibilidad integradas permanecen. La sesión recomienda probar en navegadores sin compatibilidad y con herramientas de asistencia antes de lanzar.¹

Customizable select elimina una dependencia de la misma manera que lo hace CSS Grid Lanes con los diseños de mampostería, y el emparejamiento es deliberado: la propia sesión 315 cierra dirigiendo a los espectadores hacia la sesión de Grid Lanes, y el sitio de demostración usa ambas funciones juntas.¹ Apple sigue ampliando lo que pueden hacer los simples elementos HTML, la misma trayectoria que se cubre en el elemento model de HTML en las plataformas Apple, y cada biblioteca de menú desplegable que dejas de incluir refuerza el argumento del manifiesto no-build. El centro completo de la serie es la serie Apple Ecosystem.

References