0Pricing
HTML Academy · Lección

El elemento selectlist

Personalice controles desplegables con el elemento selectlist propuesto

El elemento selectlist es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

La limitación histórica

El elemento <select> es uno de los pocos controles de formulario cuya apariencia no se puede personalizar. El navegador ignora cualquier regla CSS aplicada sobre él (bordes personalizados, fuentes y estilos de option), lo que ha dado lugar a miles de bibliotecas de "custom dropdown" que duplican el comportamiento nativo solo para poder aplicar estilos a las opciones.

Qué es selectlist

<selectlist> (también conocido como <selectmenu>) es un elemento HTML nativo diseñado como reemplazo personalizable de <select>. Acepta el mismo modelo conceptual —un botón activador y una lista de opciones—, pero todas sus partes quedan expuestas para la personalización mediante CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Partes que puede personalizar

selectlist expone el botón (el activador en estado cerrado), el listbox (el desplegable abierto) y las opciones. Los pseudoelementos CSS (::part(button), ::part(listbox)) permiten aplicar estilos a cada parte sin afectar al comportamiento nativo.

Personalización de las opciones

Las opciones dentro de selectlist pueden contener contenido arbitrario —iconos, descripciones y layouts personalizados—, no solo texto. El navegador sigue gestionando la lógica de selección, la navegación mediante teclado y la gestión del foco, mientras usted controla libremente la apariencia.

Se conservan los comportamientos integrados

selectlist conserva todo lo que <select> hace bien: navegación mediante teclado (flechas y búsqueda incremental), anuncios para lectores de pantalla, participación en formularios y gestión del foco. Hereda el comportamiento accesible y permite personalizar la UI.

Botón personalizado

Proporcione un slot para el activador: <button slot="button">Choose fruit <svg>...</svg></button>. El diseño del botón depende de usted: puede reemplazar el triángulo nativo por un icono personalizado, añadir etiquetas o cambiar los colores. El navegador seguirá gestionando la apertura y el cierre.

Participación en formularios

selectlist participa en el envío de formularios igual que select: tiene un atributo name y un value, y se envía junto con el formulario. La gestión en el servidor es idéntica. En la mayoría de los casos de uso de select, puede sustituirlo directamente en el marcado.

Compatibilidad de los navegadores

selectlist es una función en sus primeras etapas. En 2026 se distribuye en navegadores basados en Chromium mediante flags o de forma limitada. Firefox y Safari todavía no son compatibles. Para usarla en producción, debe incluirse un fallback a un <select> normal para los navegadores no compatibles.

Dificultad del polyfill

Crear un polyfill para un dropdown personalizado completamente accesible y con un comportamiento equivalente al nativo es difícil: trampas de foco, navegación mediante teclado, integración con lectores de pantalla y participación en formularios. Bibliotecas como Downshift, Combobox y react-aria resuelven este trabajo con miles de líneas de código. selectlist sustituye todo eso por un único elemento.

Cuándo adoptarlo

Para aplicaciones internas o implementaciones exclusivas de Chromium, selectlist permite ahorrar mucho código hoy en día. Para sitios públicos dirigidos a un público amplio, espere a que Firefox y Safari sean compatibles, o utilice una biblioteca envolvente que use selectlist cuando sea compatible y recurra a un menú desplegable personalizado de React/Vue en los demás casos.

Hoja de ruta de reemplazo

Cuando selectlist esté disponible en todas partes, es de esperar que muchas bibliotecas personalizadas de menús desplegables queden obsoletas o se conviertan en simples envoltorios del elemento nativo. Siga el proceso de estandarización; la API ha pasado por varias revisiones y podría seguir evolucionando antes de convertirse en un estándar definitivo.

Implicaciones para el diseño

Ahora los diseñadores pueden especificar menús desplegables con una precisión de píxel, sin tener que añadir la salvedad de «este es el diseño, pero el menú desplegable se verá diferente en el navegador». selectlist elimina una de las inconsistencias visuales más antiguas entre las maquetas de diseño y el HTML publicado.

Comprobación de conocimientos

¿Por qué es importante el elemento selectlist? ¿Qué limitación del