A veces Personalizar inputs radio y checkbox, nos complican un poco el trabajo pero ya con este metodo lo podremos implementar perfectamente casi en cualquier sitio, incluso con la complicada estructura del Contac Form 7
Los estilos los vamos a aplicar a los pseudo-elementos :after y :before del label asociado a cada input, dependiendo de si este tiene la propiedad checked (si está checkeado) o no.
¿Y por que no damos estilos directamente a los pseudo-elementos de los input? Sería la mejor opción, pero algunos navegadores (Firefox & Edge) no reconocen los pseudo-elementos :after y :before en los input.
La estructura HTML es muy importante, ya que después con CSS podremos dar estilos a los elementos dependiendo de como estén colocados.
Si ponemos el input y a continuación el label o en algunos casos span como lo es en el Contact form 7 podemos crear un estilo del tipo input:checked+label ó input:checked+span que solo se aplicará cuando el input esté checkeado.
<input type="checkbox" id="check1" ><label for="check1">Check me!</label>Con los input de tipo radio igual, primero ponemos el input y después el label o span
<input type="radio" id="radio1"><label for="radio1">Radio 1</label>
<input type="radio" id="radio2"><label for="radio2">Radio 2</label>Luego Luego comenzaremos a Agregar poco a poco los estilos
input[type="checkbox"] + label {
color: red;
}Y con el selector de la pseudo-clase :checked podemos modificar los estilos del label cuando el input está checkeado.
input[type="checkbox"]:checked + label {
color: blue;
}input[type="checkbox"]:checked + label:after {
content: "";
width: 12px;
height: 6px;
border: 4px solid #0fbf12;
float: left;
margin-left: -1.95em;
border-right: 0;
border-top: 0;
margin-top: 1em;
transform: rotate(-55deg);
}Ajustando la propiedad margin-left podemos tapar el input, pero también podemos ocultarlo y no influirá a la hora de checkearlo.
input[type="checkbox"] {
display: none;
}input[type="checkbox"] + label {
font-weight: bold;
line-height: 3em;
color: #ccc;
}
input[type="checkbox"]:checked + label {
color: #0fbf12;
}Para los input de tipo radio sería exactamente igual, lo único que hay que tener en cuenta es que suelen ser redondos…
Esto se soluciona fácilmente añadiendo la propiedad border-radius al pseudoelemento :before :
input[type="radio"]{
display:none;
}
input[type="radio"]+label:before {
content: "";
width: 20px;
height: 20px;
float: left;
margin: 0.3em 0.5em 0 0;
border: 2px solid #ccc;
background: #fff;
border-radius: 100%;
}
input[type="radio"]:checked + label:after {
content: "";
width: 0;
height: 0;
border: 8px solid #0fbf12;
float: left;
margin-left: -2.15em;
margin-top: 1em;
border-radius: 100%;
}Debemos jugar un poco con los márgenes para centrar el circulo central y quizás te toque hacer media querys. Así que ya sabemos personalizar inputs radio y checkbox.
OJO para hacerlo en el Contact Form 7 Siemplente cambias el label por span en el css y listo.
