¿Cómo personalizar los inputs radio Y checkbox? Solo Css3

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.





Comparte para enseñar a otros

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.