Gerador de Checkbox CSS

O que o CSS gerado faz

A regra é aplicada diretamente ao input com appearance: none, que remove a aparência padrão para que a caixa possa ser estilizada:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Quando a checkbox está marcada, a caixa se preenche com a cor escolhida e aparece uma marca de verificação branca, desenhada com CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Por que um input nativo

O estilo nunca substitui o elemento por um div: o <input type="checkbox"> real mantém a ativação pelo teclado, o suporte a leitores de tela e o envio do formulário. appearance: none só muda a aparência. Se você precisar suportar versões antigas do Safari, adicione -webkit-appearance: none à regra.

Foco e passagem do mouse

A regra gerada inclui uma transição de cor suave, mas nenhum estilo de foco ou passagem do mouse. Adicione suas próprias regras para :hover e :focus-visible, assim usuários de teclado sempre veem onde está o foco, por exemplo um contorno colorido ao redor da caixa.

A marca de verificação

A marca de verificação é uma pequena linha branca girada em 45 graus. Se precisar de outra cor ou de um traço mais fino ou mais grosso, edite os valores border e border-width na regra ::after.