8 fragmentos de CSS para diseñar casillas de verificación HTML y botones de radio


Los elementos de formulario HTML, como las casillas de verificación y los botones de radio, son elementos básicos de la web. Pero durante muchos años, los diseñadores web no hicieron mucho para mejorarlos. Eso ha cambiado bastante en los últimos tiempos.

Gracias al poder de CSS (y un fragmento ocasional de JavaScript), estos elementos se están poniendo en serio usos creativos. En algunos casos, están vestidos hasta el punto de ser irreconocibles. Finalmente, su destacada utilidad ahora parece igualar.

Para demostrar de qué son capaces las casillas de verificación y los botones de radio, hemos descubierto ocho fragmentos de CSS únicos. Mientras que algunos se adhieren al rol tradicional basado en formas, otros se utilizan para crear una experiencia visual completamente diferente.

Veamos de qué son capaces estos elementos previamente mundanos. ¡Los resultados pueden sorprenderle!

Botones de radio literales por Jon Kantner

¿Qué mejor manera de mostrar lo que CSS puede hacer por el noble botón de opción que imitar una radio antigua? Estos dulces botones le resultarán familiares a cualquiera que haya tenido un boombox o un equipo de alta fidelidad en el pasado. Y sí, hacer clic en uno dará como resultado un delicioso efecto “empujado”.

Vea los botones de radio de Pen Literal por Jon Kantner

Grupo de casillas de verificación con estilo como mosaicos por Havard Brynjulfsen

Aquí hay una prueba de que las casillas de verificación no tienen por qué ser aburridas. Al convertirlos en mosaicos en los que se puede hacer clic, este fragmento crea una interfaz de usuario hermosa y moderna. No solo se ve genial; también proporciona contexto. Los elementos conservan la facilidad de uso, incluso después de cambios de estilo significativos.

Vea el grupo Pen Checkbox diseñado como mosaicos por Håvard Brynjulfsen

Alternancias agresivas por Yeshua Emanuel Braz

Los conmutadores se han convertido en un uso popular para las casillas de verificación. Y aunque tenemos una colección completa dedicada a ellos, siempre vale la pena volver a visitarlos. Este divertido ejemplo parece bastante simple, hasta que activas el interruptor. La animación CSS potencia el colorido efecto de “golpe”, sin dejar dudas sobre la interacción del usuario.

Vea los desafíos Pen Codepen: Bump – Agressive Toggle de Yeshua Emanuel Braz

Buscaminas CSS puro por Bali Balo

Si alguna vez pensó en tomar elementos de forma mucho más allá de lo común, este fragmento es para usted. Una colección de casillas de verificación se ha transformado en una versión de navegador de Buscaminas, el clásico juego de Windows. En este caso, todo se ejecuta mediante HTML y CSS.

Vea el dragaminas Pen Pure CSS de Bali Balo

CSS puro Casillas de verificación y radios en Dark & ​​Light por Ivan Grozdić

Este fragmento ofrece una selección completa (¿ves lo que hicimos allí?) de elementos de radio y casillas de verificación disfrazados. No solo eso, sino que también los encontrará diseñados para los modos de contraste de colores claros y oscuros. Prácticamente todos estos elementos podrían confundirse fácilmente con botones HTML.

Ver las casillas de verificación y las radios del lápiz (oscuro/claro) – css puro – #06 por Ivan Grozdic

Animación ondulada en el tipo de entrada Radio y casilla de verificación por Wilder Taype

No hay nada de malo en usar botones de radio y casillas de verificación con un aspecto más tradicional. Y el hecho de que pueda mejorarlos con CSS, como se muestra aquí, significa que no tiene que conformarse con el valor predeterminado. Estos ejemplos no solo son atractivos, sino que también presentan una animación elegante cuando se hace clic en ellos.

Vea la animación Pen Ripple en la radio de tipo de entrada y Checkbox de WILDER TAYPE

Medidor de progreso de tareas por Clint Brown

El diseño inteligente y algunos JavaScript útiles han convertido este conjunto de casillas de verificación en una lista interactiva de tareas pendientes. Marque cada tarea de su lista y véala confirmada en la pantalla. ¿Necesitas retroceder un paso? Desmarca las tareas para empezar de nuevo. Es un gran ejemplo del tipo de flexibilidad que obtiene al usar elementos HTML nativos. No es necesario crear una interfaz de usuario personalizada desde cero.

Ver el Medidor de progreso de la tarea del bolígrafo por Clint Brown

Botones de selección de radio SVG de CSS puro por Nikki Pantony

Agregar SVG a la mezcla significa que estos botones de opción pueden escalar a cualquier tamaño. La presentación es increíblemente nítida y lo convierte en un diseño atractivo. Es una estética que una forma estándar simplemente no puede igualar.

Vea los botones selectores de radio Pen Pure CSS – SVG de Nikki Pantony

Creación de elementos de formulario más sofisticados

Hay algo que decir sobre la simplicidad de los botones de radio y casillas de verificación HTML. Durante muchos años, han hecho su trabajo bastante bien y sin muchos elogios.

Pero los diseñadores web ahora están trayendo estos elementos al siglo XXI. La capacidad de cambiar su apariencia con CSS ha dado lugar a algunas soluciones muy creativas. Los fragmentos de este resumen son excelentes ejemplos de lo que es posible.

Si está buscando aún más ideas para inspirarse, ¡eche un vistazo a nuestra colección CodePen!