¿Cómo estilizar las casillas de verificación con CSS…

Para estilizar una casilla de verificación sin bibliotecas, se puede usar una combinación de ocultar el elemento estándar y estilizar los pseudo-elementos ::before o ::after asociados con la etiqueta <label> padre.

Ocultar la casilla de verificación estándar:

input[type="checkbox"] {
  display: none; /* o visibility: hidden; height: 0; width: 0; */
}

Crear un "cuadrado" estilizado usando el pseudo-elemento <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Necesario para mostrar el pseudo-elemento */
  display: inline-block;
  width: 1em; /* Tamaño del cuadrado */
  height: 1em; /* Tamaño del cuadrado */
  border: 1px solid #ccc; /* Borde del cuadrado */
  margin-right: 0.5em; /* Espacio entre el cuadrado y el texto */
  vertical-align: middle; /* Alineación vertical */
  /* Otros estilos opcionales: background-color, border-radius, box-shadow */
}

Estilo para el estado marcado:

Usamos el selector checked para input y cambiamos los estilos del pseudo-elemento label en consecuencia.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Color de fondo cuando está marcado */
  border-color: #007bff; /* Color del borde cuando está marcado */
  /* Otros estilos opcionales */
}

Agregar una "marca" (o otro indicador):

Se puede usar un segundo pseudo-elemento (::after) o estilizar el existente ::before usando background-image (svg, data-url) o estilos de borde.

Ejemplo con border para crear una marca de verificación:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Ancho de la línea de la marca */
  height: 0.7em; /* Altura de la línea de la marca */
  border-right: 2px solid white; /* Parte derecha de la marca */
  border-bottom: 2px solid white; /* Parte inferior de la marca */
  transform: rotate(45deg); /* Rotación para formar la marca */
  position: absolute; /* Para posicionar dentro de ::before */
  top: 0.1em; /* Ajuste de posición */
  left: 0.3em; /* Ajuste de posición */
  /* El elemento padre label::before puede necesitar position: relative; */
}

Para que funcione correctamente el último ejemplo, añade position: relative; a input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... estilos anteriores ... */
  position: relative; /* Añadido para posicionar ::after */
}

Este método proporciona control total sobre la apariencia de la casilla de verificación y una buena accesibilidad, ya que el elemento estándar aún existe y responde a las acciones del usuario (clic, foco). Es importante vincular input con label usando los atributos id y for para un funcionamiento correcto al hacer clic en el texto de la etiqueta.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Estoy de acuerdo con los términos</label>

¿Cómo estilizar las casillas de verificación con CSS sin usar bibliotecas?