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
Tabla de contenidos
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.
1.- checkbox
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>
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;
}
2.- input radio
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 :
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>
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.
3.- Contact Form 7
OJO para hacerlo en el Contact Form 7 Simplente cambias el label por span en el css y listo.
