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.   https://youtu.be/PlldXyuTnUw?embedable=true  ¡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   en nuestra etiqueta junto con algo de CSS simple para crear la apariencia que estamos buscando. ::before  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   y el selector de hermanos adyacentes en nuestra etiqueta: :checked   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   y el selector de hermanos adyacente con la etiqueta: :focus   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.   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps