10 fragmentos de cuadro de selección de CSS y JavaScript gratuitos

Los cuadros de selección HTML predeterminados nos han servido bien durante décadas. Pero en la era moderna, es justo decir que están un poco... rancios.

Los diseñadores pueden hacerlo mejor y, gracias a los avances en CSS, es fácil personalizar los cuadros de selección. Sin mencionar todo el código fuente abierto disponible gratuitamente en línea.

Seleccioné una colección de mis 10 mejores selecciones para estilos de cajas selectas hechas a mano. Estos no se publican como complementos, sino que se basan en plantillas para la personalización de JavaScript y CSS. Pero todos son igual de fáciles de configurar e incluso de cambiar el estilo para sus propios fines.

1. Menú de selección personalizado

El inicio de la colección son los estilos de menú de selección personalizados de Wallace Erick.

Utiliza tanto CSS para el restyling como JavaScript para configurar la UX de los menús. Se comportan de forma ligeramente diferente a las selecciones de HTML estándar, y creo que son un poco más agradables de usar.

Puede elegir el tamaño y el estilo de color del menú o trabajar con los valores predeterminados de Wallace. Lo mejor de todo es que incluye un diseño de campo de carga personalizado que, si alguna vez ha intentado cambiar el estilo, sabrá que es difícil.

Un excelente lugar para comenzar si solo desea menús selectos limpios pero de aspecto fresco que funcionen.

2. Selección sencilla

Aquí hay otro cuadro de selección muy simple que tiene como objetivo combinarse de manera más natural en cada diseño.

Esto se basa en colores más sutiles con un esquema de color blanco y negro simple. Pero también usa JavaScript para animar el menú de selección dentro y fuera de la vista.

Funciona apuntando a un campo de entrada oculto que se comporta como el campo de selección. De esta manera, aún puede extraer datos de la interfaz en sus formularios, porque esta solución técnicamente no usa el elemento <select> real.

Si la compatibilidad es una preocupación, omita este. Pero debo admitir que el diseño es hermoso y sería perfecto para el tráfico de escritorio.

3. Menús desplegables de HTML no apetecibles

Como su nombre indica, este paquete de menús selectos tiene como objetivo no apestar. Todos tienen diferentes estilos y tamaños con botones en los que puede hacer clic para cambiar los colores a pedido.

Obviamente, puede eliminar esa característica en su propio diseño y ceñirse a un esquema que funcione para su sitio. Pero en general, estos menús selectos funcionan como uno normal y son magníficos de usar.

Si le preocupa la compatibilidad, considere trabajar con esta plantilla.

La mayoría de los cambios son cosméticos, por lo que no deberían afectar mucho el comportamiento del usuario.

4. Selección de marcador de posición

El diseño real de este menú de selección de marcador de posición es magnífico, pero el diseño no es el único factor aquí.

El desarrollador James Nowland creó este menú con el objetivo de eliminar el valor predeterminado de la opción de selección. Esto significa que se comporta más como un marcador de posición en los campos de texto donde lo ve cuando el campo está en blanco, pero una vez que establece un valor, desaparece.

Es totalmente compatible y funciona con el elemento de selección HTML real. Un campo de opción está oculto de forma predeterminada cada vez que el usuario elige una opción. De esta manera, nunca verá el texto "seleccione una opción" en ninguna parte del menú desplegable. ¡Solución realmente creativa!

5. Diseño plano

La estética suele ser importante en el diseño web y este menú de selección plana es un gran ejemplo.

Todavía funciona como una selección típica y la parte desplegable no se ha cambiado en absoluto. Pero solo el restyling de la selección en sí anima la página. Se siente mucho más elegante que el feo navegador predeterminado.

Incluso podría tomar esta plantilla y expandirla con sus propios estilos planos aplicados al área desplegable. ¡Totalmente tu llamada!

Pero como plantilla inicial, esta es una de las opciones más simples para cualquier interfaz.

6. CSS puro

Soy un gran admirador de CSS puro sobre JavaScript porque simplifica todo el proceso de diseño. Esto no es fácil, pero hay tantas soluciones por ahí.

Uno de mis favoritos es este fragmento que presenta no solo menús de selección de CSS puro, sino también radios y casillas de verificación.

Todos se ven fenomenales y deben combinarse con cualquier tipo de diseño. Tienes control total para realizar ediciones en el CSS y, lo mejor de todo, también deberían funcionar en todos los navegadores principales.

7. Menús desplegables accesibles con estilo

Este es uno de los ejemplos más estilizados de lo que puede hacer con los menús de selección. Este fragmento creado por Andy Fitzsimon se basa en JavaScript para el efecto desplegable y utiliza CSS personalizado para degradados e iconos de flecha.

Lo bueno es que este menú también es compatible con la función sin JS, por lo que funcionará incluso si JavaScript está deshabilitado. Se llama degradación elegante y es el mejor amigo de un desarrollador web para la accesibilidad.

Aún así, estos menús seleccionados ejecutan los gradientes web 2.0 de la vieja escuela que pueden no encajar en un diseño para 2017 y más allá.

Pero esto demuestra que puede llevar menús selectos a cualquier lugar que desee con un poco de creatividad. Y estos pueden funcionar sorprendentemente bien si se abre camino a través del CSS para personalizarlos un poco.

8. Menú de iconos SVG

Los menús de selección predeterminados tienen el ícono de flecha al costado y no mucho más. Con un poco de magia SVG, puedes transformar esto en cualquier otro ícono que desees.

Este menú personalizado tiene su propio diseño de icono plus que se ejecuta con un archivo SVG puro. Cuando haga clic para expandir el menú, se animará en un icono X para cerrar/ocultar.

Nunca antes había visto algo así y muestra lo lejos que hemos llegado superando los límites de los navegadores web.

Lamentablemente, esto no se ejecuta en el elemento de selección de HTML nativo. Es una colección de elementos de lista dentro de un div , por lo que debería apuntar a un campo de entrada oculto cada vez que se seleccione un valor.

Afortunadamente, ese proceso es realmente fácil, por lo que si desea este diseño en su sitio, no debería costarle mucho trabajo ponerlo en marcha.

9. Experimento de cuadro de selección

Aquí hay un diseño experimental que realmente me llamó la atención. La pantalla de demostración de comparación muestra cuán diferente es esto de los menús de selección regulares y cómo altera la experiencia del usuario.

Cuando toque/haga clic por primera vez para abrir el menú, se deslizará hacia abajo con efectos de animación completos. Pero no se ocultará a menos que vuelva a hacer clic en el menú, a diferencia de los menús de selección típicos que se ocultan cuando hace clic en cualquier otro lugar de la página.

Un muy buen ejemplo de diseño limpio con animación simple. Pero si no le gusta la función de hacer clic para ocultar que falta, esta puede ser un factor decisivo.

10. Selecciones oscuras y claras

Si también te encanta el CSS puro y quieres selecciones elegantes, echa un vistazo a esta solución e intenta usar una de ellas como plantilla de inicio.

Ambos se basan en degradados CSS para los fondos y combinan los menús desplegables con el color inferior del degradado. Esto no utiliza ningún complemento de JavaScript, por lo que puede lograrlo con solo un poco de CSS y un poco de esfuerzo creativo.

Tenga en cuenta que el CSS en sí es bastante complicado, por lo que es útil si conoce el idioma. Pero como punto de partida, esta es una de las mejores opciones que encontrarás, y también deja mucho espacio para la personalización.