Los botones de radio son esenciales en los formularios web. Se utilizan en los campos de opciones donde un usuario puede seleccionar una opción de varias disponibilidad.
En caso de que quieras personalizar cómo se ven estos botones, aquí tienes un pequeño tutorial.
HTML:
```
```
CSS:
```css
/* Ocultamos los botones de radio originales */
input[type=“radio”] {
display: none;
}
/* Creamos el nuevo botón de radio */
.radio-label {
padding: 10px;
display: inline-block;
position: relative;
margin: 10px;
cursor: pointer;
}
.radio-label:before {
content: “”;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
left: 0;
border: 3px solid #000;
}
/* Colorea el botón de radio cuando está seleccionado */
input[type=“radio”]:checked + .radio-label:after {
content: “”;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
left: 7px;
top: 7px;
background: #000;
}
```
Los botones de radio ahora se ocultan y se muestran con un nuevo estilo. Puedes ver tus botones de radio personalizados en acción. Recuerda que puedes jugar con los valores y colores para conseguir exactamente el look que deseas para tus botones de radio.
