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.

Personalizar un checkbox con CSS

Ocultar los inputs con CSS

¿Cómo personalizar un checkbox con CSS?

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

Añadir “ON” en nuestro checkbox personalizado

Personalizar un radio button con CSS

Personalizar un Select con CSS

comentarios

Deja un comentario Cancelar respuesta

¡No te pierdas nada!

Personalizar un checkbox con CSS

Ocultar los inputs con CSS

¿Cómo personalizar un checkbox con CSS?

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

Añadir “ON” en nuestro checkbox personalizado

Personalizar un radio button con CSS

Personalizar un Select con CSS

comentarios

Deja un comentario Cancelar respuesta

Otros artículos que te pueden interesar

4 Métodos para centrar verticalmente con CSS

Animaciones, transiciones y transformaciones CSS. Recopilación

Transformaciones CSS. Guía básica

Suscríbete a mi newsletter

Descargar ZIP