`<select>` ahora se puede personalizar con CSS

• Desde Chrome 135, comienza el soporte para una nueva función que permite personalizar con CSS el elemento <select> sin perder los estándares de accesibilidad
• Tras años de ajustes de especificación y desarrollo, se ofrece como un componente sólido que no se rompe en navegadores antiguos
• También puede incluir contenido HTML y, con la incorporación de appearance: base-select, ahora es posible aplicar animaciones, estilos y muchas otras personalizaciones

Introducción a appearance: base-select

• La nueva propiedad CSS appearance: base-select convierte al elemento <select> en un nuevo estado personalizable

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

• Nuevas capacidades al usar base-select

  • Cambia el comportamiento del parser HTML del navegador para el contenido interno de <select>
  • Cambia la forma de renderizado y la estructura interna
  • Proporciona nuevas partes y estados internos
  • Ofrece un diseño predeterminado mínimo, optimizado para la personalización
  • La opción mostrada aparece en la capa superior, como un popover
  • La posición de las opciones puede controlarse con anchor()

• Funciones que desaparecen al usar base-select

  • No se puede renderizar <select> fuera de la ventana del navegador
  • No se invoca la UI nativa de selección del sistema operativo móvil
  • No refleja el ancho de la opción <option> más larga

Se puede incluir contenido HTML dentro de <select>

• Antes, si se insertaban imágenes o SVG dentro de <option>, el navegador los ignoraba
• Al aplicar appearance: base-select, se renderizan tal cual como HTML
• En Chrome se ven opciones con SVG incluidos, pero Safari, Firefox y otros todavía no lo soportan
• Demo en CodePen: enlace de prueba
• Esta función fue introducida como experimento de Finch y podría desactivarse si fuera necesario

Personalización completa

• Todos los componentes de base-select pueden reemplazarse, animarse y estilizarse
• Permite construir interfaces de selección con significado mediante distintos diseños
• Algunos ejemplos incluyen indicador de estado, opciones con avatar, selector de colores y selección de estado de publicación
• Demo en CodePen: enlace de prueba

La interfaz de JavaScript no cambia

• El comportamiento de JavaScript del <select> existente se mantiene igual
• Eso sí, si se agrega HTML dentro de <option>, hay que probar porque cambió la forma de parsear el valor seleccionado
• Si se usa la propiedad value, no hace falta hacer cambios adicionales

Material adicional

Estándares web

• Especificación Open UI Select
• Pull Request de la especificación HTML
• Chrome Intent to Ship

Material relacionado con Chrome

• Artículo del blog de Chrome con la solicitud y explicación
• Resultados del feedback de la comunidad
• Usar <hr> dentro de <select>
• Artículo explicativo de Una / enlace con resumen de cambios
• Colección de CodePen de Una

Material de la comunidad

• Colección de CodePen de Brecht De Ruyte
• Comparación de CSS Tricks entre select nativo y custom
• Implementación de <select> en Open Props UI
• Ejemplo de select custom con animaciones

Demos que aprovechan <select> personalizado

• Demo de Una
• Demo de Brecht
• Demo de Adam

[GN⁺]

Opiniones en Hacker News

• El hecho de que esto me emocione de forma desproporcionada probablemente delata a mi yo de desarrollador web de principios de los 2000. Es una función muy útil porque el elemento select ofrece capacidades que no se pueden recrear con HTML

  • Ahora solo falta agregar autocompletado y selector de etiquetas

• Hasta que esta función tenga soporte amplio, debería usarse como mejora progresiva. Según caniuse.com, actualmente tiene un 46% de soporte a nivel global

  • Hay que tener cuidado de no ofrecer una mala experiencia a los usuarios de navegadores que no la soportan
  • Es importante no incluir información o funcionalidad crítica en el nuevo estilo

• Me da muchísimo gusto ver que esto se implementó. Va a ser una mejora mucho mayor que los reemplazos personalizados de cuadros de selección

• Me preocupa que no active los componentes integrados del sistema operativo móvil. Los componentes integrados son confiables, accesibles y responden bien

  • Está bien poder confiar en que se abra la UI de Android. Esto aplica no solo al elemento select, sino también a las entradas de fecha/hora

• Hay algunos controles a los que es mejor no aplicar estilo. En el caso de las barras de desplazamiento, a veces quedan demasiado delgadas o con mal contraste de color, y se vuelven difíciles de usar

  • El elemento select predeterminado no es el control más bonito, pero cumple su función

• Parece ser algo que los desarrolladores web han estado esperando durante décadas. Podría reemplazar muchas librerías de JS

  • No tengo Chrome instalado, pero me pregunto cómo maneja el campo de selección múltiple en el video de ejemplo

• Ahora se puede personalizar el elemento select con CSS en navegadores Chromium

  • Los estándares web se están volviendo cada vez más complejos

• Se proporcionó un enlace al issue de Firefox

• Si seguimos así, pronto tendremos paridad de funciones con VB6

• Es mejor que una librería de JS rota. Pero mi principal duda es cómo se comporta el layout cuando hay muchas opciones

  • Me asusta que no active los componentes integrados del sistema operativo móvil. Me pregunto cómo se resolverá el layout
  • La opción mostrada se posiciona con anchor()
  • Es experimental, pero probablemente esta podría ser la mejor parte. Si realmente funciona en CSS, sería algo increíble

[carnoxen]

Entonces, ¿eso significa que <selectlist> ya no será necesario?

[deminoth]

Es otro tema, pero parece que en el bot de Slack no se muestra el <select> del título jaja

[xguru]

Ah, esto lo corregiré más adelante.