Podríamos dejar una entrada de texto sin estilo. Podríamos dejar un enlace sin estilo. Incluso un botón. Pero las casillas de verificación … no las dejamos en paz. Es por eso que las casillas de verificación de estilo nunca pasan de moda.
Aunque diseñar casillas de verificación no es tan complicado, tampoco tenemos que conformarnos con simples cambios de color de fondo o agregar y eliminar bordes para indicar cambios de estado. Tampoco tenemos que sacar ninguna habilidad de diseño elegante, que no poseemos, para que esto funcione. Te mostraré como
Lo esencial
En las siguientes demostraciones, las casillas de verificación tienen prácticamente el mismo diseño de tres pilas: en la parte inferior hay una casilla de verificación y en la parte superior hay dos elementos apilados o pseudoelementos. La casilla de verificación se indica como marcada o desmarcada dependiendo de cuál de las dos esté visible.
Si observa el código CSS en los bolígrafos, notará que todos los diseños, incluido el de las casillas de verificación, son cuadrículas. Puede usar otros diseños que se sientan adecuados para su caso de uso (y obtener más información en la Guía de cuadrícula de trucos de CSS). Las notas adicionales sobre el código y las alternativas de diseño se encuentran al final del código fuente dentro de las plumas.
Además, cualquier elemento apilado en la parte superior de la casilla de verificación tiene pointer-events: none para que no impidan que los usuarios hagan clic o toquen la casilla de verificación.
Pasemos ahora al primer método.
Idea 1: Fondos combinados como estado
Combinar CSS es una técnica versátil. Manipular colores en relación con dos o más elementos o fondos puede ser útil en contextos en los que quizás no haya pensado.
Uno de esos casos es la casilla de verificación.
<input id="un" type="checkbox"> <label for="un">un</label>
<!-- more checkboxes --> input[type=checkbox]::before,
input[type=checkbox]::after {
mix-blend-mode: hard-light;
pointer-events: none;
/* more style */
}
input[type=checkbox]::before {
background: green;
content: '✓';
color: white;
/* more style */
}
input[type=checkbox]::after {
background: blue;
content: '⨯';
/* more style */
}
input[type=checkbox]:checked::after {
mix-blend-mode: unset;
color: transparent;
}En esta demostración, diseñé los pseudo-elementos de la casilla de verificación en verde y azul, los apilé y les di a cada uno un mix-blend-mode valor. Esto significa que el fondo de cada elemento se mezcla con su fondo.
Usé el hard-light valor, que emula el resultado de multiply o screen dependiendo de si el color superior es más oscuro o más claro. Puede aprender en profundidad sobre los diferentes modos de fusión en MDN.
Cuando la casilla está marcada, el ::after El valor del modo de mezcla de mezcla del pseudo-elemento no está establecido, lo que da como resultado una imagen diferente.
Idea 2: haz una animación 3D
Animar un bloque de color es divertido. Haz que parezcan 3D y es aún mejor. CSS tiene los medios para representar elementos a lo largo de un espacio 3D emulado. Entonces, usando eso, creamos una caja 3D y la rotamos para indicar el cambio de estado de la casilla de verificación.
<div class="c-checkbox">
<input type="checkbox" id="un">
<!-- cube design -->
<div><i></i><i></i><i></i><i></i></div>
</div>
<label for="un">un</label>
<!-- more checkboxes -->.c-checkbox > div {
transition: transform .6s cubic-bezier(.8, .5, .2, 1.4);
transform-style: preserve-3d;
pointer-events: none;
/* more style */
}
/* front face */
.c-checkbox > div > i:first-child {
background: #ddd;
transform: translateZ( -10px );
}
/* back face */
.c-checkbox > div > i:last-child {
background: blue;
transform: translateZ( 10px );
}
/* side faces */
.c-checkbox > div > i:nth-of-type(2),
.c-checkbox > div > i:nth-of-type(3) {
transform: rotateX(90deg)rotateY(90deg);
position: relative;
height: 20px;
top: 10px;
}
.c-checkbox > div > i:nth-of-type(2) {
background: navy;
right: 20px;
}
.c-checkbox > div > i:nth-of-type(3) {
background: darkslategray;
left: 20px;
}El <div> después de que la casilla de verificación se convierta en un contenedor de un espacio 3D (sus elementos secundarios se pueden colocar a lo largo de los ejes x, y y z) después de que se proporcione transform-style: preserve-3d;.
Utilizando el transform propiedad, colocamos dos <i> elementos (de color gris y azul) con cierta distancia entre ellos a través del eje z. Dos más están encajados entre ellos, cubriendo sus lados izquierdo y derecho. Es como una caja de cartón que está cubierta excepto en la parte superior e inferior.
Cuando la casilla de verificación está marcada, esta casilla gris y azul se gira hacia los lados para mirar hacia el otro lado. Como ya agregué un transition al <div>, su rotación está animada.
input:checked + div {
transform: rotateY( 180deg );
}Idea 3: jugar con el radio del borde
¿Cambiar el radio del borde de una casilla marcada? No es tan divertido. ¿Cambiar también el radio del borde de otras cajas cercanas? Ahora tenemos algo.
<input type="checkbox" id="un"> <label for="un">un</label>
<!-- more rows of checkboxes -->input {
background: #ddd;
border-radius: 20px;
/* more style */
}
input:not(:first-of-type)::before {
content: '';
transform: translateY(-60px); /* move up a row */
pointer-events: none;
}
input:checked + * + input::before,
input:last-of-type:checked {
border-radius: 20px;
background: blue;
}
input:checked + * + input:checked + * + input::before {
border-top-left-radius: unset !important;
border-top-right-radius: unset !important;
}
input:checked::before {
border-bottom-left-radius: unset !important;
border-bottom-right-radius: unset !important;
}
/* between the second-last and last boxes */
input:nth-of-type(4):checked + * + input:checked {
border-top-left-radius: unset;
border-top-right-radius: unset;
}Si acaba de interactuar con la demostración antes, notará que cuando hace clic o toca una casilla de verificación, no solo puede cambiar sus propios bordes, sino también los bordes de las casillas posteriores y anteriores.
Ahora, no tenemos selectores que puedan seleccionar elementos antes, solo los posteriores. Entonces, lo que hicimos para controlar la apariencia de un cuadro anterior es usar el pseudoelemento de un cuadro de verificación para darle estilo al cuadro anterior. Con la excepción del primer cuadro, todos los demás cuadros obtienen un pseudoelemento que se mueve a la parte superior del cuadro anterior.
Digamos que las cajas A, B y C están una detrás de otra. Si hago clic en B, puedo cambiar la apariencia de A al diseñar el pseudo-elemento de B, B al diseñar el pseudo-elemento de C y C al diseñar el pseudo-elemento de D.
Desde B, los pseudoelementos de B, C y D son accesibles, siempre que el siguiente selector de elementos se pueda usar entre ellos en el diseño.
Las cuatro esquinas de cada casilla de verificación se redondean inicialmente cuando están marcadas y desmarcadas. Pero si se marca una casilla, las esquinas superiores de la casilla siguiente y las esquinas inferiores de la casilla anterior se enderezan (anulando y eliminando sus radios de borde).
Idea 4: usar una máscara CSS
Conmutadores, conmutadores … también son casillas de verificación en lo que respecta al código. Así que podemos diseñar los cuadros como conmutadores para este, y se hace con una máscara CSS, sobre la que Chris ha escrito antes. Pero en pocas palabras, es una técnica en la que usamos una imagen para filtrar partes de su fondo.
<input type="checkbox">
<div class="skin one"></div>
<div class="skin two"></div>.one.skin {
background: no-repeat center -40px url('photo-1584107662774-8d575e8f3550?w=350&q=100');
}
.two.skin {
background: no-repeat center -110px url('photo-1531430550463-9658d67c492d?w=350&q=100');
--mask: radial-gradient(circle at 45px 45px , rgba(0,0,0,0) 40px, rgba(0,0,0,1) 40px);
mask-image: var(--mask); -webkit-mask-image: var(--mask);
}Hay dos máscaras (que muestran fotografías de paisajes) encima de una casilla de verificación. El de arriba recibe un mask-image tiene la forma de un interruptor de palanca típico: un círculo transparente a la izquierda, y el resto es de un color completamente opaco. A través del círculo transparente vemos la foto de abajo mientras que el resto de la imagen de la máscara muestra la foto en la parte superior.
Cuando se hace clic en una casilla de verificación, el círculo transparente se mueve hacia la derecha, por lo que vemos la imagen en la parte superior a través del círculo mientras que el resto muestra la foto en la parte inferior.
input:checked ~ .two.skin {
--mask: radial-gradient(circle at 305px 45px, rgba(0,0,0,1) 40px, rgba(0,0,0,0) 40px);
mask-image: var(--mask); -webkit-mask-image: var(--mask);
}Idea 5: uso de la sombra del cuadro
Terminemos con el método más simple, pero lo que considero el más efectivo, de todos ellos: un recuadro animado box-shadow.
<input id="un" type="checkbox"> <label for="un">un</label>input {
transition: box-shadow .3s;
background: lightgrey;
/* more style */
}
input:checked {
box-shadow: inset 0 0 0 20px blue;
}Hay algunas propiedades CSS que se pueden animar de forma predeterminada y una de ellas es box-shadow. Este tipo de animación sutil va bien con un tema minimalista.
¡Eso es! Espero que esto te inspire un poco la próxima vez que te encuentres trabajando con casillas de verificación. CSS nos brinda tantas posibilidades para indicar cambios de estado, así que diviértete un poco y comparte si tienes alguna idea interesante.