Qué es Customizable Select Generator?
El elemento select personalizable es una nueva función CSS que permite estilizar elementos select HTML nativos sin reemplazarlos con estructuras div potenciadas por JavaScript. Usando appearance: base-select, puede estilizar el icono del selector, las marcas de verificación de opciones y el popover desplegable mientras mantiene toda la accesibilidad integrada y el comportamiento de formulario de un elemento select real. No necesita una biblioteca desplegable JavaScript.
Respuesta rápida
Estilice elementos select nativos con appearance: base-select (Chrome 135+). Use ::picker-icon para flechas desplegables, option::checkmark para indicadores de selección y ::picker(select) para estilizar el popover. Se conservan la semántica de formulario nativa y la accesibilidad del teclado. El fallback es un select estándar legible.
Last updated: 2026-05-28
Limitaciones
- El select personalizable es una función muy nueva (Chrome 135+) y aún no está en CSS Baseline. Firefox y Safari aún no lo admiten. Siempre pruebe con @supports y proporcione un fallback nativo legible.
- No todos los aspectos del select son personalizables. El diseño de la lista de opciones, el comportamiento de desplazamiento y la IU del selector móvil aún están controlados por el navegador. Esto es por diseño — mantiene el select utilizable en todos los dispositivos.
- Los pseudoelementos ::picker-icon y option::checkmark son parte del modelo de select personalizable y no se pueden usar en otros elementos. Solo funcionan dentro de un select con appearance: base-select.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese las opciones del select como pares valor|etiqueta, uno por línea.
- Elija el estilo del icono del selector (chevron, SVG personalizado o ninguno) y el estilo de la marca de verificación (check, dot o ninguno).
- Opcionalmente incluya estilizado de estado cerrado y notas de fallback del navegador.
- Copie el HTML y CSS generados. El select funciona como un elemento de formulario nativo en todos los navegadores.
Para qué puedes usarla
- Estilizar un selector de país para que coincida con el sistema de diseño de una marca sin una biblioteca de select personalizada.
- Crear un selector de idioma estilizado que mantenga la semántica de formulario nativa y la accesibilidad del teclado.
- Construir un selector de tema con iconos de marca de verificación personalizados que funcione en formularios y lectores de pantalla.