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:
- Radio Buttons, Checkbox y select personalizados con CSS
- Personalizar un radio button con CSS
- Personalizar un checkbox con CSS y animarlo
- Personalizar un select con CSS
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 <i> dentro del mismo <label> donde está nuestro checkbox. Y con las pseudo clases :before de la etiqueta <i> 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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.content-input input, .content-select select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; } .content-input input{ visibility: hidden; position: absolute; right: 0; } |
CSS
|
1 2 3 4 |
<label class="content-input"> <input type="checkbox" name="Vehiculo" id="autopista" value="autopista">Autopista <i></i> </label> |
¿Cómo personalizar un checkbox con CSS?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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; } |
Con este código dibujaríamos esta forma:
Ahora con el pseudo elemento :before añadiremos el “botón”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* 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
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.
|
1 2 3 4 5 6 7 8 9 |
.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; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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
- Radio Buttons, Checkbox y select personalizados con CSS
- Personalizar un radio button con CSS
- Personalizar un checkbox con CSS y animarlo
- Personalizar un select con CSS
Descarga este checkbox y utilízalo en tus proyectos
[…] Personalizar un checkbox con CSS y animarlo […]
[…] Personalizar un checkbox con CSS y animarlo […]
[…] Personalizar un checkbox con CSS y animarlo […]