No hay diseñador web que acabe agotado de personalizar los formularios. Son complejos y llenos de sutilezas que debes conocer. Y por si no fuera poco hay lugares imposibles de tocar como los input radio y los input checkbox… ¡Hasta ahora!
En el siguiente tutorial voy a enseñar como realizar un checkbox y un radio personalizado para un formulario en HTML. Usando la metodología BEM para organizar los estilos en un formato de componente fácil de construir o modificiar. Todo ello sin preocuparnos de las limitaciones propias del CSS logrando adaptar nuestros diseños. Además incluiré un resumen en SASS para que sea fácil de copiar. Compatible con todos los navegadores más utilizados: Chrome, Firefox, Edge, Safari…
DEMO
Pulsa en cada elemento para ver su funcionamiento.
Radio
Checkbox
Radio
Estructuramos nuestro radio de forma natural. Pero debemos incluir un span que será el lugar donde mostraremos la imagen con el sustituto al radio.
<p>
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="radio" name="genero" value="mujer" checked>
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Mujer</span>
</label>
</p>
<p>
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="radio" name="genero" value="hombre">
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Hombre</span>
</label>
</p>
Ocultamos los radios y en su lugar dejamos en los span una imagen de fondo que previamente hemos preparado.
/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
font-family: arial;
}
/* Modificador para dar la imagen de radio */
.custom-radio-checkbox__show--radio {
background-image: url(radio-uncheck.png);
}
/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
display: none;
}
/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
display: inline-block;
width: 15px;
height: 15px;
margin-right: .5rem;
background-size: cover;
}
/* Cambia el radio personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--radio {
background-image: url(radio-check.png);
}
La imagen sin pulsar sería la siguiente.
Y pulsado sería así.
Checkbox
Se trabaja de la misma forma. Primero declaramos nuestro input dentro de un label, sin olvidar un span vacío que será el futuro espacio para la imagen.
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="checkbox" name="genero" value="hombre">
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--checkbox"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Acepto las condiciones de uso y privacidad</span>
</label>
Mostramos una imagen de fondo dentro del span y ocultamos el checkbox original.
/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
font-family: arial;
}
/* Modificador para dar la imagen de checkbox */
.custom-radio-checkbox__show--checkbox {
background-image: url(checkbox-uncheck.png);
}
/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
display: none;
}
/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
display: inline-block;
width: 15px;
height: 15px;
margin-right: .5rem;
background-size: cover;
}
/* Cambia el checkbox personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--checkbox {
background-image: url(checkbox-check.png);
}
La imagen sin pulsar sería la siguiente.
Y pulsado sería así.
Todo cohesionado en un componente
HTML
<!-- Radios -->
<p>
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="radio" name="genero" value="mujer" checked>
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Mujer</span>
</label>
</p>
<p>
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="radio" name="genero" value="hombre">
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Hombre</span>
</label>
</p>
<!-- End Radios -->
<!-- Checkbox -->
<p>
<label class="custom-radio-checkbox">
<!-- Input oculto -->
<input class="custom-radio-checkbox__input" type="checkbox" name="genero" value="hombre">
<!-- Imagen en sustitucion -->
<span class="custom-radio-checkbox__show custom-radio-checkbox__show--checkbox"></span>
<!-- Texto -->
<span class="custom-radio-checkbox__text">Acepto las condiciones de uso y privacidad</span>
</label>
</p>
<!-- End Checkbox -->
CSS
/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
font-family: arial;
}
/* Modificador para dar la imagen de checkbox */
.custom-radio-checkbox__show--checkbox {
background-image: url(checkbox-uncheck.png);
}
/* Modificador para dar la imagen de radio */
.custom-radio-checkbox__show--radio {
background-image: url(radio-uncheck.png);
}
/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
display: none;
}
/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
display: inline-block;
width: 15px;
height: 15px;
margin-right: .5rem;
background-size: cover;
}
/* Cambia el checkbox personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--checkbox {
background-image: url(checkbox-check.png);
}
/* Cambia el radio personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--radio {
background-image: url(radio-check.png);
}
SASS
.custom-radio-checkbox
display: inline-flex
align-items: center
cursor: pointer
font-family: arial
&__show--checkbox
background-image: url(checkbox-uncheck.png)
&__show--radio
background-image: url(radio-uncheck.png)
&__input
display: none
&__show
display: inline-block
width: 15px
height: 15px
margin-right: .5rem
background-size: cover
&__input:checked + &__show--checkbox
background-image: url(checkbox-check.png)
&__show--radio:checked + &__show--radio
background-image: url(radio-check.png)
{{ comments.length }} comentarios