Aplicar estilo a una casilla de verificación con CSS

Este tutorial presentará un método para diseñar una casilla de verificación en CSS.

Use CSS para diseñar las casillas de verificación

Una casilla de verificación es un elemento HTML que se utiliza para recibir información del usuario y se utiliza en casi todos los sitios web. Dado que la casilla de verificación predeterminada proporcionada por el navegador se ve igual en todos los demás sitios, ¿por qué no diseñarlos? Aunque es un poco complicado diseñarlos usando pseudoelementos como :before, :after, :hover y : check, es posible diseñar una casilla de verificación usando CSS.

Para aplicar estilo a las casillas de verificación, usaremos solo HTML y CSS, sin bibliotecas adicionales. Este método funciona bien en los navegadores modernos. Puede haber muchos enfoques cuando se trata de diseñar casillas de verificación. Podemos seguir estos simples principios para lograr nuestro objetivo. Podemos ocultar el control de casilla de verificación predeterminado, que tiene el estilo del navegador y no se puede anular de ninguna manera significativa usando CSS. Con el control oculto, aún necesitaremos detectar y alternar su estado marcado. Podemos reflejar el estado marcado de la casilla de verificación aplicando estilo a un nuevo elemento.

Los principios anteriores se pueden aplicar utilizando diferentes métodos y no existe un único enfoque correcto o incorrecto. En este tutorial, primero envolveremos la casilla de verificación en un elemento div. Significa que incluso si el control de la casilla de verificación está oculto, aún podemos alternar su estado marcado haciendo clic en cualquier lugar dentro del div. Luego, podemos ocultar la casilla de verificación y agregar un nuevo elemento después de la casilla de verificación, que podemos diseñar en consecuencia. El elemento debe aparecer después de la casilla de verificación para ser seleccionado y estilizado dependiendo del estado :checked. La pseudoclase en CSS se usa para diseñar un elemento en particular que define un estado específico para el elemento. Aquí estamos usando algunos pseudo-elementos. El selector :before inserta algo antes del contenido de cada elemento seleccionado. El selector :checked coincide con cada elemento <input> marcado.

En HTML, la casilla de verificación se encuentra dentro de la etiqueta <label>. La función principal del elemento <span> es hacer referencia a la casilla de verificación más tarde desde CSS.

En CSS, la propiedad display especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento. En nuestro caso, se establece en none, lo que elimina por completo el elemento <input> dentro de la etiqueta <label>, es decir, nuestra casilla de verificación predeterminada. Usamos las propiedades height, width y border para generar la casilla de verificación personalizada. Las propiedades CSS height y width establecen la altura y la anchura de un elemento. La propiedad CSS border permite especificar el estilo, ancho y color del borde de un elemento. La propiedad display especifica el comportamiento de visualización. El valor en línea mostrará el elemento como en línea. La propiedad posición especifica los tipos de posicionamiento utilizados para que un elemento establezca nuestra nueva casilla de verificación.

El pseudo-elemento :before se utiliza para insertar nuestro contenido antes del elemento <span>. El selector : verificado coincide con todos los elementos marcados, lo que significa que cuando nuestra casilla de verificación está marcada, se inyectarán nuevos contenidos antes del elemento <span> ya que estamos usando el selector :before. Estos admiten la propiedad content, que permite inyectar iconos Unicode. El valor de la propiedad CSS content:'\2714' representa un icono de marca de verificación.

Código de ejemplo:

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}