Se usó la API de Cloud Translation para traducir esta página.

El elemento <select> ahora se puede personalizar con CSS

Adam Argyle

Publicado: 24 de marzo de 2025

A partir de Chrome 135, los desarrolladores y diseñadores web finalmente pueden unirse en un elemento <select> accesible, estandarizado y con estilo CSS en la Web. Esto llevó muchos años de trabajo, muchas horas de ingeniería y de especificaciones colaborativas, y el resultado es un componente increíblemente enriquecido y potente que no se romperá en navegadores más antiguos.

Aquí tienes un video de elementos select personalizados con estas nuevas funciones:

Con demostraciones de Una, Brecht y Adam.

Si seguiste de cerca el proceso, notarás que algunos nombres y funciones de 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 ayudará.

También hay documentación nueva y brillante sobre el elemento select personalizable en MDN, repleta de detalles.

Conoce a `appearance: base-select`

Una nueva propiedad de CSS appearance: base-select que coloca el elemento <select> en un estado nuevo, configurable y con estilo, al que se suele hacer referencia como estilos "base":

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

Usar base-select desbloquea una serie de funciones y comportamientos nuevos:

Cambia el analizador de HTML del navegador para el contenido dentro de <select>.
Cambia los elementos internos renderizados del <select>.
Expone nuevas partes y estados internos para <select>.
Un nuevo aspecto minimalista, optimizado para la personalización.
Las opciones que se muestran están en la capa superior, como un elemento emergente.
Las opciones que se muestran se posicionan con anchor().

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

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

Un `<select>` ahora puede incluir contenido HTML enriquecido

Antes de que pudieras 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. El navegador lo leería tal 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 <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 aparecerá.

Chrome, Safari y Firefox muestran la renderización de un elemento select con SVG en su interior. Chrome muestra las imágenes, mientras que Safari y Firefox las renderizan como si no hubiera imágenes. — Pruébalo en este Codepen.

Existe el riesgo de que se interrumpan los sitios web existentes con elementos select personalizables 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 emergencia. Si todo sale bien, el experimento finalizará y el código se enviará de forma permanente a la fuente.

Completamente personalizable

Cada parte de un base-select se puede intercambiar, personalizar y animar. Aquí tienes 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 select. El primero tiene un punto indicador de estado verde, con una etiqueta que dice "Activado". En la siguiente, se muestran avatares junto a las opciones. El tercero es un selector de espacio de color con una etiqueta personalizada integrada en el elemento select. La última opción permite elegir entre los estados de borrador o publicado. — Pruébalo en este Codepen.

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

Interfaces de JavaScript sin cambios

No hay riesgos para tus interacciones de JavaScript existentes 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 sigue analizando y omitiendo imágenes y 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 realizar ajustes.

Si usas el atributo value en un <option>, no tienes de qué preocuparte.

Recursos

Chrome es el primer navegador 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.

Mantente al tanto, 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.

Agradecemos especialmente a todos los que participaron en la realización de este evento.