La creación de un componente desplegable de selección personalizada es uno de los requisitos más comunes en el desarrollo web. Seleccionar menú desplegable permite al usuario elegir un valor de una lista predefinida. Tal vez se esté preguntando:

«¿Por qué necesito crear un componente desplegable de selección personalizado, si ya existe una etiqueta de selección HTML? Puedo aplicar un poco de estilo CSS y listo».

Desafortunadamente, el menú desplegable de selección de estilo no es tan sencillo. El elemento de selección HTML nativo no nos permite aplicar estilos a las etiquetas de opciones.

Hoy en día, los menús desplegables de selección aparecen en muchas variaciones diferentes. Puede encontrar varias bibliotecas javascript y marcos CSS , que tienen una implementación propia para menús desplegables de selección personalizada. Tienen una funcionalidad probada en varios navegadores y son muy confiables. Muchas veces, no es necesario utilizar bibliotecas o marcos, porque en muchos casos, crear un menú desplegable de selección personalizada es una tarea sencilla tarea.

En esta publicación de blog, quiero compartir contigo cómo puedes crear un menú desplegable de selección funcional sin usar bibliotecas ni marcos. Puedes aplicar estilo para seleccionar opciones y agregar componentes personalizados allí.

Antes de comenzar a crear el menú desplegable de selección personalizada, debe preguntar al siguientes preguntas:

¿El menú desplegable de selección tendrá cientos o miles de opciones?

¿Pueden los usuarios seleccionar varias opciones?

En ambos casos, necesitaría utilizar un biblioteca de terceros, porque la propia implementación puede llevar mucho tiempo. Si necesita un menú desplegable con cientos de opciones, debe proporcionar a los usuarios una función de búsqueda. Si el menú desplegable tiene miles de opciones, debe utilizar la técnica de «ventanas». Para obtener más información, consulte el menú desplegable de selección avanzada.

Ejemplo de menú desplegable de selección personalizada

Aquí puede ver el elemento de selección predeterminado, que puede verse un poco diferente dependiendo del navegador que esté utilizando.

En este tutorial, convertiremos el elemento de selección predeterminado en esto:

El HTML

Tradicionalmente, cuando necesita crear un menú desplegable de selección personalizado, debe use la siguiente estructura.

Dado que no podemos usar la etiqueta select, tenemos más opciones para elegir la estructura html . Podemos usar elementos ul y li o div con span elementos. Optemos por div y span estructura.

El CSS

Es una buena idea Comience con un restablecimiento de CSS, que reduce las inconsistencias del navegador. Opté por restablecer el CSS de Eric Meyer:

Fuente: https://meyerweb.com/eric/tools/css/reset/

Prefiero usando el modelo de caja donde ancho = ancho del elemento + relleno + bordes.

Primero, agregamos algunos estilos básicos para elementos html. <div class=”custom-select”> la posición es relativa, porque necesitamos aplicar el posicionamiento absoluto para la lista desplegable.

El siguiente CSS se usa para la flecha desplegable.

Puede ver la transición y transformación de las propiedades de CSS3. La transición se utiliza para la aparición y desaparición gradual de la lista desplegable. La transformación se utiliza para animar la flecha, cuya dirección representa el estado desplegable.

JavaScript

No es necesario utilizar bibliotecas de terceros para la manipulación de dom. Para un menú desplegable simple, solo necesita eventos básicos de JavaScript.

Agregamos la función de clic al contenedor. La función de clic alterna la clase .open, que representa si la lista de opciones está abierta o cerrada. Dentro de la función de clic estamos buscando <div class=”custom-select”> por this.querySelector(".custom-select"). This La función de clic interior representa el elemento en el que se hizo clic. No estamos consultando el documento completo por document.querySelector(".custom-select") en caso de que tengamos más menús desplegables dentro de DOM.

En el fragmento de JavaScript anterior, estamos iterando sobre todas las opciones y agregando clic función, que cambia la opción seleccionada agregando la clase .selected. Nuevamente, dentro de la función de clic, estamos consultando dentro de la opción en la que se hizo clic (this en el fragmento), en caso de que queramos cambiar los controladores de eventos para admitir varios menús desplegables en una página.

El último fragmento es opcional y permite cerrar la lista desplegable, si el usuario hace clic fuera del menú desplegable.

Varios menús desplegables de selección en una página

Si queremos usar varios menús desplegables de selección en una página, debemos adjuntar el detector de clics a todos los .custom-select-wrapper elementos y cerrar todos los menús desplegables si el usuario hace clic fuera de un menú desplegable.

Menú desplegable de selección avanzada

Si necesita un menú desplegable de selección con cientos de opciones o selección múltiple, puede consultar algunas de las bibliotecas disponibles. En este artículo puedes ver una comparación de las bibliotecas más populares.

En caso de que necesites lidiar con miles de opciones, no puedes renderizar un DOM con miles de elementos de opción.Si no puede utilizar ningún back-end, deberá utilizar la técnica de «ventanas».

¿Qué es la técnica de «ventanas»?

En lugar de representar miles de elementos de una lista en una vez, el «sistema de ventanas» o virtualización se enfoca en hacer que solo los elementos sean visibles para el usuario. Puede consultar esta charla de Brian David Vaughn sobre la implementación de la técnica de «ventanas», que es fácil de implementar y puede proporcionar enormes ganancias de rendimiento.

Conclusión

Espero que esta publicación de blog te ayude a crear un componente desplegable de selección personalizado. Al principio, debe saber si el menú desplegable de selección contiene muchas opciones o si los usuarios pueden seleccionar varias opciones. Si necesita un componente de selección básico, la publicación del blog describe la implementación completa en HTML, CSS y JavaScript. Puedes comprobar el código fuente en Github.