Cómo diseñar botones de opción HTML: una guía paso a paso

Los botones de opción HTML son un elemento básico de los formularios web, pero su apariencia predeterminada deja mucho que desear. En esta publicación de blog, analizaremos uno de mis métodos favoritos para personalizar la apariencia de los botones de opción usando CSS, creando una experiencia más fácil de usar y visualmente atractiva.

¡Comencemos ocultando los botones de radio!

Necesitamos comenzar reconociendo las limitaciones del estilo en varios navegadores para los botones de opción. Si bien es frustrante no poder diseñarlos directamente, podemos utilizar soluciones alternativas. En este ejemplo, el primer paso es ocultar la entrada del botón de opción real. Sé que esto suena extraño, pero sabemos que no podemos diseñarlos, así que solo tenemos que sacarlos de la ecuación.

Sin embargo, esto debe hacerse de manera accesible, garantizando que siga siendo funcional para todos los usuarios. Esto se puede lograr utilizando el siguiente conjunto de estilos que ocultan visualmente el contenido manteniendo su usabilidad:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Crear los botones de radio personalizados

Para crear la apariencia personalizada del botón de opción, aprovecharemos el pseudoelemento ::before en nuestra etiqueta junto con algo de CSS simple para crear la apariencia que estamos buscando.

Para nuestro ejemplo, el HTML se ve así:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Para comenzar, agregaremos los siguientes estilos a nuestro elemento de etiqueta:

 label { display: inline-flex; align-items: center; }

Esto asegurará que una vez que agreguemos nuestros estilos de botón de opción, se alinee verticalmente correctamente con el texto de la etiqueta.

Ahora, agregaremos nuestros botones de opción simulados usando el pseudoelemento ::before :

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

En este punto, tenemos algo que empieza a parecerse a una lista de botones de radio, pero si hacemos clic en las radios, veremos que no pasa nada. Aunque el pseudoelemento se parece visualmente a un botón de opción, carece de interactividad porque aún no hemos manejado el estado marcado.

Manejo de interacciones y estados

Podemos manejar el estado marcado con la pseudoclase :checked y el selector de hermanos adyacentes en nuestra etiqueta:

 input[type="radio"]:checked + label { color: black; }

Para el punto interior, podemos aprovechar un degradado radial en nuestro pseudoelemento:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Ahora, cuando hacemos clic en ellos, funcionan de manera muy similar a los botones de radio nativos. Y podemos mejorar las interacciones agregando algunos efectos de transición:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

No nos olvidemos del enfoque

Para mejorar la accesibilidad, también necesitaremos abordar el estado enfocado de los botones de opción simulados. Esta vez necesitaremos utilizar la pseudoclase :focus y el selector de hermanos adyacente con la etiqueta:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Conclusión

Siguiendo este método, podemos crear botones de opción personalizados elegantes y accesibles que mejoran enormemente la experiencia del usuario. Estos botones de opción personalizados no solo se ven mejor que los estándar, sino que también pueden proporcionar una mejor retroalimentación e interacción cuando se implementan correctamente.

Este fue un ejemplo bastante simple que puede que ni siquiera se vea muy diferente a los estilos del navegador nativo, pero la clave es que, con esta configuración, podemos hacer prácticamente lo que queramos. Así que siéntete libre de experimentar con los estilos y adaptarlos al diseño de tu proyecto.

¿Quieres verlo en acción?

Consulte el código de demostración y los ejemplos de esta técnica en el ejemplo del lápiz de código a continuación. Si tienes alguna pregunta o idea, no dudes en dejar un comentario.

Recuerde que con un poco de creatividad y algo de CSS, puede transformar la apariencia de los botones de opción HTML para que coincidan con su diseño manteniendo la accesibilidad y la usabilidad.