El elemento <select> ahora se puede personalizar con CSS

Adam Argyle

Fecha de publicación: 24 de marzo de 2025

A partir de Chrome 135, los desarrolladores y diseñadores web pueden unirse en un elemento <select> accesible, estandarizado y con diseño CSS en la Web. Lleva muchos años en desarrollo, muchas horas de trabajo de ingeniería y especificación colaborativa, y el resultado es un componente increíblemente rico y potente que no fallará en navegadores más antiguos.

Este es un video de selecciones personalizadas con estas nuevas funciones:

Presenta demostraciones de Una, Brecht y Adam.

Si has estado siguiendo el proceso de cerca, notarás que algunos nombres y funciones de las especificaciones cambiaron desde la solicitud de comentarios de la comunidad de Una. Por suerte, si trabajaste con esa publicación y te interesa saber qué cambió, Una también te puede ayudar.

También hay una nueva documentación en MDN para seleccionar elementos personalizables, repleta de detalles.

Conoce a appearance: base-select

Una nueva propiedad CSS appearance: base-select que coloca el elemento <select> en un estado nuevo, configurable y con diseño que se conoce comúnmente como estilos "base":

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

El uso de base-select desbloquea varias funciones y comportamientos nuevos:

Cuando usas base-select, se pierden varias funciones y comportamientos:

  • El <select> no se renderiza fuera del panel del navegador.
  • No activa los componentes integrados del sistema operativo para dispositivos móviles.
  • <select> deja de tomar el ancho de la <option> más larga.

Un <select> ahora puede incluir contenido HTML enriquecido.

Antes de poder personalizar un <select>, si colocabas elementos como una imagen o un SVG en el elemento <option>, el navegador los ignoraba.

Considera el siguiente código HTML, que el navegador lo leería como lo escribiste:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Sin embargo, el DOM usado no incluiría el <svg>:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

A continuación, se muestran (de izquierda a derecha) Chrome, Safari y Firefox renderizando el código HTML anterior. Si el navegador admite appearance: base-select, el SVG aparecerá en la opción; de lo contrario, no lo hará.

Chrome, Safari y Firefox muestran la renderización de una selección con SVG en el interior. Chrome muestra las imágenes, mientras que Safari y Firefox las renderizan como si no hubiera ninguna.
Pruébala en este Codepen.

Existe el riesgo de que se dañen los sitios web existentes con la selección personalizable debido a los cambios en el analizador. Chrome tiene las funciones detrás de un experimento de Finch en caso de que sea necesario desactivarlo de forma urgente. Si todo va bien, el experimento finalizará y el código se enviará de forma permanente a la fuente.

Totalmente personalizable

Cada parte de un base-select se puede reemplazar, personalizar y animar. Esta es una demostración que usa todas las funciones nuevas para crear experiencias de selección reconocibles y significativas.

Se muestran cuatro presentaciones diferentes de un elemento seleccionado. El primero tiene un punto de indicador de estado verde con la etiqueta de activado. En la siguiente imagen, se muestran los avatares junto a las opciones. El tercero es un selector de espacio de color con una etiqueta personalizada integrada en la selección. La última opción permite elegir estados de borrador o publicados.
Pruébala en este Codepen.

Encuentra muchos más ejemplos en la sección de recursos al final de esta publicación.

Interfaces de JavaScript sin cambios

No hay riesgos para tus interacciones existentes de JavaScript con un elemento <select>.

Sin embargo, si comienzas a agregar HTML enriquecido a tus elementos <option>, debes probar los valores seleccionados, ya que el navegador aún analiza e ignora las imágenes y los SVG. Sin embargo, la lógica para determinar la cadena de contenido seleccionada cambió y, según lo que tengas en tus opciones, es posible que debas hacer ajustes.

Si usas el atributo value en un <option>, no tienes que preocuparte.

Recursos

Chrome es el primero en implementar base-select, pero todos los navegadores participaron en las especificaciones, y aún quedan más elementos "base" por completar. Esto es solo el comienzo.

No te pierdas las novedades, ya que seguiremos agregando orientación, ejemplos y recursos para personalizar elementos seleccionados. Mientras tanto, consulta los siguientes vínculos para obtener más información.

Un agradecimiento especial a todos los que participaron en este proyecto.