Personalizar un checkbox con Css. Tutorial Diseño Web

En este post vamos a ver cómo podemos personalizar un checkbox con CSS, el cuál además también animaremos, para que realice una acción o movimiento cada vez que el usuario haga click en él.

Recuerda que este post forma parte de una mini guía:

Para personalizar nuestros checkbox con CSS, como te decía en el primer post de esta mini guía; Radio Buttons, Checkbox y select personalizados con CSS vamos a tener que ocultarlos. Incluiremos una etiqueta  dentro del mismo <label> donde está nuestro checkbox. Y con las pseudo clases :before de la etiqueta  dibujaremos nuestro checkbox personalizado.

Ocultar los inputs con CSS

Para ocultar los inputs primero vamos a aplicar la propiedad y valor de css appearence:none. Con ello estamos especificando a los navegadores que no apliquen ninguna apariencia por defecto y nos permitira editar su CSS.

Después de utilizar esta propiedad y valor visibility:hidden para ocultar los inputs. Da igual que el checkbox no sea visible porque cada vez que hacemos click en la etiqueta <label> este se activa.

CSS

.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.content-input input{
	visibility: hidden;
	position: absolute;
	right: 0;
}

.content-input input,

.content-select select{

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

}

.content-input input{

visibility: hidden;

position: absolute;

right: 0;

}

CSS

<label class="content-input">
	<input type="checkbox" name="Vehiculo" id="autopista" value="autopista">Autopista
	<i></i>
</label>

<input type="checkbox" name="Vehiculo" id="autopista" value="autopista">Autopista

</label>

¿Cómo personalizar un checkbox con CSS?

.content-input{
	position: relative;
	margin-bottom: 30px;
	padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar 
        el elemento <i> en este espacio*/
	display: block;
}

/* Estas reglas se aplicarán a todos las elementos i 
después de cualquier input*/
.content-input input + i{
       background: #f0f0f0;
       border:2px solid rgba(0,0,0,0.2);
       position: absolute; 
       left: 0;
       top: 0;
}

/* Estas reglas se aplicarán a todos los i despues 
de un input de tipo checkbox*/
.content-input input[type=checkbox ] + i{
	width: 52px;
	height: 30px;
	border-radius: 15px;
}

.content-input{

position: relative;

margin-bottom: 30px;

padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar

el elemento en este espacio*/

display: block;

}

/* Estas reglas se aplicarán a todos las elementos i

después de cualquier input*/

.content-input input + i{

background: #f0f0f0;

border:2px solid rgba(0,0,0,0.2);

position: absolute;

left: 0;

top: 0;

}

/* Estas reglas se aplicarán a todos los i despues

de un input de tipo checkbox*/

.content-input input[type=checkbox ] + i{

width: 52px;

height: 30px;

border-radius: 15px;

}

Con este código dibujaríamos esta forma:

Ahora con el pseudo elemento :before añadiremos el “botón”:

/*
Creamos el círculo que aparece encima de los checkbox
con la etqieta before. Importante aunque no haya contenido
debemos poner definir este valor.
*/
.content-input input[type=checkbox] + i:before{
	content: ''; /* No hay contenido */
	width: 26px;
	height: 26px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	-webkit-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);
}

Creamos el círculo que aparece encima de los checkbox

con la etqieta before. Importante aunque no haya contenido

debemos poner definir este valor.

.content-input input[type=checkbox] + i:before{

content: ''; /* No hay contenido */

width: 26px;

height: 26px;

background: #fff;

border-radius: 50%;

position: absolute;

z-index: 1;

left: 0px;

top: 0px;

-webkit-box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);

box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2);

}

Resultado

Ejemplo : Checkbox personalizado con colores y formas

Añadir movimiento cuando el usuario haga click en el checkbox

Los checkbox y radio buttons tienen una pseudo clase :checked, con ella podemos definir propiedades y valores CSS, para estos elementos en su estado normal y seleccionado.

Con el siguiente código lo que haremos será mover el elemento a la derecha cuando hagamos click, mientras que con segunda parte del código, cambiaremos el color del fondo.

.content-input input[type=checkbox]:checked + i:before{
	left: 22px;
	-webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);
}

.content-input input[type=checkbox]:checked + i{
 background: #2AC176;
}

.content-input input[type=checkbox]:checked + i:before{

left: 22px;

-webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.2);

box-shadow: 3px 0 -3px 0 rgba(0,0,0,0.2);

}

.content-input input[type=checkbox]:checked + i{

background: #2AC176;

}

Resultado : Personalizar un checkbox con Css

Añadir “ON” en nuestro checkbox personalizado

Por último, añadiremos la palabra On cuando nuestro botón esté seleccionado. Para ello utilizaremos el pseudo elemento :after

.content-input input[type=checkbox] + i:after{
	content: 'ON';
	position: absolute;
	font-size: 10px;
	color: rgba(255,255,255,0.6);
	top: 8px;
	left: 4px;
	opacity: 0 /* Ocultamos este elemento */;
	transition: all 0.25s ease 0.25s;
}

/* Cuando esté checkeado cambiamos la opacidad a 1 y lo mostramos */
.content-input input[type=checkbox]:checked + i:after{
 opacity: 1;
}

.content-input input[type=checkbox] + i:after{

content: 'ON';

position: absolute;

font-size: 10px;

color: rgba(255,255,255,0.6);

top: 8px;

left: 4px;

opacity: 0 /* Ocultamos este elemento */;

transition: all 0.25s ease 0.25s;

}

/* Cuando esté checkeado cambiamos la opacidad a 1 y lo mostramos */

.content-input input[type=checkbox]:checked + i:after{

opacity: 1;

}

Resultado

Recibe los archivos HTML y CSS con todos los ejemplos en tu mail

DESCARGAR

:after :before animation

Escrito por: Anto Fernández

Mi nombre es Anto Fernández y gestiono este blog. En el puedes encontrar recursos que yo mismo he generado de tereceros acerca de diseño y maquetación web.