Como estilizar caixas de seleção com CSS sem usar…

Para estilizar uma checkbox sem bibliotecas, pode usar uma combinação de esconder o elemento padrão e estilizar os pseudo-elementos ::before ou ::after associados ao <label> pai.

Esconder a checkbox padrão:

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

Criar um "quadrado" estilizado usando o pseudo-elemento <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Necessário para mostrar o pseudo-elemento */
  display: inline-block;
  width: 1em; /* Tamanho do quadrado */
  height: 1em; /* Tamanho do quadrado */
  border: 1px solid #ccc; /* Borda do quadrado */
  margin-right: 0.5em; /* Espaço entre o quadrado e o texto */
  vertical-align: middle; /* Alinhamento vertical */
  /* Outros estilos opcionais: background-color, border-radius, box-shadow */
}

Estilo para o estado marcado:

Usamos o seletor checked para input e mudamos os estilos do pseudo-elemento label em conformidade.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Cor de fundo quando marcado */
  border-color: #007bff; /* Cor da borda quando marcado */
  /* Outros estilos opcionais */
}

Adicionar uma "marca" (ou outro indicador):

Pode usar um segundo pseudo-elemento (::after) ou estilizar o existente ::before usando background-image (svg, data-url) ou estilos de borda.

Exemplo com border para criar uma marca de verificação:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Largura da linha da marca */
  height: 0.7em; /* Altura da linha da marca */
  border-right: 2px solid white; /* Parte direita da marca */
  border-bottom: 2px solid white; /* Parte inferior da marca */
  transform: rotate(45deg); /* Rotação para formar a marca */
  position: absolute; /* Para posicionar dentro de ::before */
  top: 0.1em; /* Ajuste de posição */
  left: 0.3em; /* Ajuste de posição */
  /* O elemento pai label::before pode precisar de position: relative; */
}

Para que o último exemplo funcione corretamente, adicione position: relative; a input[type="checkbox"] + label::before:

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

Esta abordagem oferece controle total sobre a aparência da checkbox e uma boa acessibilidade, pois o elemento padrão ainda existe e reage às ações do usuário (clique, foco). É importante vincular input com label usando os atributos id e for para funcionamento correto ao clicar no texto do rótulo.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Concordo com os termos</label>

Como estilizar caixas de seleção com CSS sem usar bibliotecas?