<select> más allá de lo básico. La interfaz de usuario del dropdown <select> (el botón, la lista de opciones, el indicador de flecha) ha estado en gran medida fuera del alcance del CSS, siendo controlada por los widgets nativos de cada sistema operativo.
Esta limitación significaba que los desarrolladores a menudo debían conformarse con la apariencia predeterminada del navegador o reemplazar completamente el <select> con soluciones personalizadas HTML/JS que imitan un dropdown. Estas soluciones alternativas — desde los primeros widgets de jQuery UI hasta los modernos componentes select de React/Vue — ofrecían mayor control pero con concesiones: JavaScript adicional, accesibilidad compleja y sobrecarga de rendimiento.
La buena noticia es que las cosas están cambiando. Una nueva solución basada en estándares está emergiendo, permitiendo estilizar profundamente un <select> usando solo CSS y un poco de HTML adicional, mientras se conserva la funcionalidad nativa. Chrome 135+ es el primero en ofrecer esta capacidad, anticipando un futuro donde diseñadores y desarrolladores web puedan finalmente unirse en un elemento <select> accesible y totalmente estilizable mediante CSS. Este resultado, fruto de muchos años de desarrollo, involucró extensa ingeniería y colaboración entre navegadores, ofreciendo una solución rica que sigue funcionando adecuadamente en navegadores más antiguos. En este artículo, exploraremos la estrella de esta nueva API — el elemento <selectedcontent> (a veces referido como el pseudo-elemento :selectedcontent) — y veremos cómo facilita un enfoque moderno y nativo para dropdowns personalizados.
¿Qué es exactamente <selectedcontent>? Es un nuevo elemento HTML (y efectivamente un pseudo-elemento de <select>) que muestra el contenido de la <option> actualmente seleccionada en el estado cerrado del select. En otras palabras, representa el texto/HTML que aparece en la superficie del botón del select, reflejando cualquier opción que haya sido elegida. Cuando cambia la selección del usuario, el navegador actualiza automáticamente <selectedcontent> clonando el contenido DOM de la opción recién seleccionada. Esto permite a los desarrolladores diseñar la visualización de la opción seleccionada de forma independiente a cómo están estilizadas las opciones en la lista desplegable. Como veremos, esto ofrece mucha flexibilidad de diseño: por ejemplo, podrías incluir iconos o imágenes en tus etiquetas <option>, pero ocultar esos iconos en <selectedcontent> para que solo se muestren en la lista desplegable, no en el botón colapsado.
Es importante señalar desde el principio que estas características son experimentales y aún no están estandarizadas.
En el resto de este artículo, cubriremos cómo activar el nuevo modo de selección personalizable, la sintaxis HTML/CSS involucrada (incluyendo appearance: base-select y nuevos pseudo-elementos), y mostraremos paso a paso cómo construir un ejemplo de desplegable personalizado con estilo propio. Luego analizaremos los pros y contras de este enfoque CSS nativo frente a selects completamente personalizados con JS y ARIA, incluyendo tablas comparativas y recomendaciones según el caso de uso.
Hemos esperado décadas por selects completamente estilizados sin sacrificar la accesibilidad. Esta función finalmente cumple esa promesa.
— Adam ArgyleEl desafío con los elementos <select> nativos
Tradicionalmente, el estilo de un elemento <select> nativo estaba limitado. Los desarrolladores enfrentaban dos caminos principales:
- Aceptar la mínima personalización proporcionada por el navegador.
- Implementar soluciones totalmente personalizadas con JavaScript y ARIA, lo que frecuentemente generaba sobrecarga de rendimiento y problemas de accesibilidad.
La introducción del enfoque :selectedcontent aborda directamente estas limitaciones.
¿Qué es exactamente <selectedcontent>? Es un nuevo elemento HTML (y efectivamente un pseudo-elemento de <select>) que muestra el contenido de la <option> actualmente seleccionada en el estado cerrado del select. En otras palabras, representa el texto/HTML que aparece en la superficie del botón del select, reflejando cualquier opción que haya sido elegida. Cuando cambia la selección del usuario, el navegador actualiza automáticamente <selectedcontent> clonando el contenido DOM de la opción recién seleccionada. Esto permite a los desarrolladores diseñar la visualización de la opción seleccionada de forma independiente a cómo están estilizadas las opciones en la lista desplegable. Como veremos, esto ofrece mucha flexibilidad de diseño: por ejemplo, podrías incluir iconos o imágenes en tus etiquetas <option>, pero ocultar esos iconos en <selectedcontent> para que solo se muestren en la lista desplegable, no en el botón colapsado.
Es importante señalar desde el principio que estas características son experimentales y aún no están estandarizadas.
En el resto de este artículo, cubriremos cómo activar el nuevo modo de selección personalizable, la sintaxis HTML/CSS involucrada (incluyendo appearance: base-select y nuevos pseudo-elementos), y mostraremos paso a paso cómo construir un ejemplo de desplegable personalizado con estilo propio. Luego analizaremos los pros y contras de este enfoque CSS nativo frente a selects completamente personalizados con JS y ARIA, incluyendo tablas comparativas y recomendaciones según el caso de uso.
Hemos esperado décadas por selects completamente estilizados sin sacrificar la accesibilidad. Esta función finalmente cumple esa promesa.
— Adam ArgyleEl desafío con los elementos <select> nativos
Tradicionalmente, el estilo de un elemento <select> nativo estaba limitado. Los desarrolladores enfrentaban dos caminos principales:
- Aceptar la mínima personalización proporcionada por el navegador.
- Implementar soluciones totalmente personalizadas con JavaScript y ARIA, lo que frecuentemente generaba sobrecarga de rendimiento y problemas de accesibilidad.
La introducción del enfoque :selectedcontent aborda directamente estas limitaciones.
Introducción al elemento <selectedcontent>
El elemento <selectedcontent> es un nuevo elemento HTML nativo diseñado para mostrar el contenido de la <option> actualmente seleccionada dentro de un <select>. Básicamente refleja la estructura HTML de la opción elegida en el estado cerrado (colapsado) del menú desplegable.
Compatibilidad con navegadores:
Actualmente es experimental y está disponible en Chrome 135+. Otros navegadores (Safari, Firefox) aún no lo soportan, aunque la iniciativa está avanzando dentro del Open UI Community Group.
Uso de appearance: base-select
Para activar el estilo personalizable en selects nativos, es necesario habilitarlo explícitamente mediante CSS:
.custom-select,
.custom-select::picker(select) {
appearance: base-select;
}Aplicar appearance: base-select permite un control completo con CSS tanto del botón del select como de la lista desplegable, sin perder comportamientos nativos como la navegación por teclado y la compatibilidad con lectores de pantalla.
Ejemplo práctico: Un dropdown personalizado con HTML y CSS
Vamos a construir un sencillo menú desplegable para seleccionar frutas:
Marcado HTML:
<select name="fruit" class="custom-select">
<button>
<selectedcontent></selectedcontent>
<svg class="arrow-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
="M6 9l6 6 6-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<option value="" selected disabled hidden>Selecciona una fruta…</option>
<option value="apple"><span class="icon">🍎</span> Manzana</option>
<option value="banana"><span class="icon">🍌</span> Banana</option>
<option value="cherry"><span class="icon">🍒</span> Cereza</option>
</select>CSS Styling:
Base select and button styles:
.custom-select,
.custom-select::picker(select) {
appearance: base-select;
}
.custom-select {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
width: 200px;
font: 16px/1.4 sans-serif;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.custom-select::picker-icon {
display: none;
}Arrow y dropdown estilos:
.custom-select .arrow-icon {
width: 1em;
height: 1em;
transition: transform 0.2s;
}
.custom-select:open .arrow-icon {
transform: rotate(-180deg);
}
.custom-select::picker(select) {
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
}
.custom-select option {
padding: 0.25rem 0.5rem;
}
.custom-select option:hover {
background: #f0f0f0;
}
.custom-select option:checked {
background: #e6f7ff;
}
.custom-select option:checked::checkmark {
content: '✔';
margin-right: 0.5em;
color: #2196f3;
}
.custom-select selectedcontent .icon {
display: none;
}Esta configuración produce un menú desplegable completamente estilizado, con iconos emoji y marcas de verificación personalizadas, sin una sola línea de JavaScript.
Selects nativos vs completamente personalizados: una vista comparativa
| Aspecto | Select nativo ( | Select personalizado (HTML + JS + ARIA) |
|---|---|---|
| Usabilidad | Interacciones nativas con teclado y formularios | Requiere scripting personalizado |
| Accesibilidad | Excelente soporte nativo | Requiere un manejo ARIA extenso |
| Estilo | Alta flexibilidad, con algunas limitaciones | Ilimitado, completamente personalizable |
| Rendimiento | Ligero y rápido | Potencialmente pesado por eventos JS |
| Mantenimiento | Fácil, con baja sobrecarga | Mayor complejidad, más esfuerzo |
Recomendación:
Utiliza selects nativos personalizables siempre que sea posible para menús desplegables estándar, debido a sus importantes ventajas en usabilidad y accesibilidad.
Mejora progresiva y compatibilidad
Actualmente, el soporte para estas funcionalidades es experimental y se encuentra principalmente en Chrome. Se recomienda adoptar un enfoque de mejora progresiva. Los navegadores que no lo soportan regresan elegantemente al comportamiento estándar de los selects, manteniendo la funcionalidad completa.
La detección de características es sencilla con CSS:
@supports (appearance: base-select) {
/* advanced styling */
}Accesibilidad integrada, sin necesidad de JS. Es el sueño de cualquier desarrollador para estilizar elementos de formulario nativos.
— Una KravetsEl elemento <selectedcontent> y la propiedad CSS appearance: base-select representan un gran avance para los desarrolladores web. Estas funcionalidades permiten construir menús desplegables ricos, accesibles y completamente personalizables, reduciendo significativamente la necesidad de recurrir a soluciones basadas en JavaScript.
Empieza a experimentar hoy mismo y mantente a la vanguardia aprovechando estos estándares emergentes en tus proyectos front-end.
SEO Keywords:
- CSS select styling
- selectedcontent element
- customizable select dropdown
- native form controls
- accessible CSS selects