El “Santo Grial” de la maquetación web siempre ha sido poder estilar completamente un <select> nativo sin recurrir a librerías de JavaScript complejas o hacks imposibles. Parece mentira que, después de tantos años, la etiqueta <select> siga siendo tan resistente a CSS.
Afortunadamente, el futuro se ve prometedor gracias a la iniciativa de Open UI y la nueva etiqueta experimental <selectmenu>.
Ver el Pen Custom Select Nativo: El Fin de los Hacks con <selectmenu> por Iván Albizu (@ivan_albizu) en CodePen.
⚠️ Funcionalidad Experimental
Actualmente, esta característica no es estándar y su soporte es limitado. Para probarla, necesitas usar versiones Canary de Chrome o Edge y habilitar las siguientes flags:
- Ve a
chrome://flagsoedge://flags. - Busca y habilita #enable-experimental-web-platform-features.
- Reinicia el navegador.
Puedes leer más sobre la propuesta oficial en Open UI.
La Nueva Estructura: <selectmenu>
La propuesta introduce nuevas etiquetas y conceptos para separar la lógica del estilo:
<selectmenu>: El contenedor principal que reemplaza al antiguo<select>.- Slots y Parts: Permiten inyectar y estilar partes específicas del componente (el botón, el listado, las opciones).
Personalizando el Botón y el Listado
A diferencia del <select> tradicional, aquí tenemos acceso directo al DOM del botón disparador y del contenedor de opciones (popup/listbox) mediante atributos slot y behavior.
El Botón
<div slot="button" behavior="button">
<button behavior="selected-value"></button>
</div><popup slot="listbox" behavior="listbox">
<option>Item</option>
</popup>En este PEN puede verse el ejemplo, pero si no estás usando Chrome Canary o Edge Canary con las flags experimentales habilitadas no podrás verlo
Y el código en github