Gerador de Checkbox CSS

Escolha um estilo de checkbox, ajuste o tamanho e a cor de destaque, e esta ferramenta gera o CSS para substituir a caixa de seleção padrão do navegador por uma com estilo personalizado, continuando totalmente clicável e acessível — sem fontes de ícones ou imagens.

O que é esta ferramenta?

Caixas de seleção padrão do navegador têm aparência diferente em cada navegador e são difíceis de estilizar diretamente, já que sua aparência é desenhada pelo sistema operacional, não pelo CSS puro. A solução padrão é esconder visualmente a caixa nativa e estilizar um elemento irmão no lugar, controlado pelo estado :checked da caixa — o input continua totalmente funcional e acessível, só a aparência muda.

Esta ferramenta constrói esse padrão para três estilos comuns: uma caixa arredondada com marca de seleção animada, um interruptor deslizante estilo iOS, e um círculo preenchido (estilo radio button). Clique na caixa na pré-visualização para ver o estado marcado, ajuste tamanho e cor de destaque, e copie o CSS.

Fonte: Selectors Level 4, W3C — a especificação que define a pseudoclasse :checked na qual esta técnica se baseia.

Por que usar?

Pré-visualização ao vivo e clicável — ative a caixa para ver exatamente como ficam os estados marcado e desmarcado.
Três estilos distintos e muito usados em uma só ferramenta: caixa com marca, interruptor deslizante e círculo preenchido.
O elemento subjacente continua sendo um <input type="checkbox"> real, então navegação por teclado, envio de formulário e leitores de tela continuam funcionando normalmente.
Tamanho e cor de destaque ajustáveis, gerados diretamente nos valores CSS em vez de deixados como variáveis para preencher.
Não precisa de fonte de ícones, arquivo SVG ou imagem — a marca e o botão são desenhados com bordas CSS simples e pseudo-elementos.
Grátis, roda no seu navegador, sem cadastro.

Como usar

Escolha um estilo: marca arredondada, interruptor deslizante ou círculo preenchido.
Arraste o controle de tamanho para aumentar ou diminuir a caixa.
Escolha uma cor de destaque — ela se torna a cor de fundo e borda do estado marcado.
Clique na caixa no painel de pré-visualização para confirmar que os estados marcado e desmarcado estão bons.
Copie o CSS gerado para sua folha de estilo e use em qualquer <input type="checkbox"> envolvido pela mesma estrutura do HTML de pré-visualização.

Exemplo

Entrada

Estilo: marca arredondada · Tamanho: 24px · Cor: laranja

Resultado

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

O input da caixa de seleção fica visualmente escondido; a caixa visível é um <span> irmão estilizado pelo estado :checked do input, com uma pequena borda rotacionada desenhada como marca de seleção quando marcado.

Por que esconder a caixa nativa em vez de removê-la

É tentador pular o <input> real e construir uma caixa de seleção só com uma <div> estilizada com um handler de clique, mas isso perde de graça o suporte a teclado, envio de formulário e semântica para leitores de tela. O padrão gerado por esta ferramenta mantém o input real no HTML — só escondido visualmente com opacity: 0 e reposicionado — então o navegador continua tratando como uma checkbox de verdade em tudo que importa, enquanto um elemento irmão cuida do estilo visível.

Os três estilos em resumo

Marca arredondada: o padrão clássico de quadrado com marca, mais comum em campos de formulário, checkboxes de aceite de termos e listas de seleção múltipla.
Interruptor deslizante: passa a sensação de uma configuração liga/desliga instantânea em vez de um campo de formulário — melhor para telas de preferências do que listas de checkbox.
Círculo preenchido: um visual minimalista, parecido com radio button, útil quando uma caixa quadrada fica visualmente pesada perto de elementos de interface arredondados.

Combinando com o resto da sua interface

A cor de destaque gerada só afeta o estado marcado — escolha a cor da sua marca ou dos seus botões para que a caixa fique consistente com o resto da página. Combine com o mesmo border-radius usado em outros lugares da interface para um visual mais coeso.

→ Gerador de Border Radius · Seletor de cores

Perguntas frequentes

A caixa de seleção estilizada continua acessível?

Sim — o elemento subjacente continua sendo um <input type="checkbox"> real, só escondido visualmente em vez de removido. Ele continua recebendo foco, respondendo ao teclado (espaço para marcar/desmarcar), e leitores de tela o anunciam corretamente, já que leem o elemento input, não o span estilizado ao lado.

Por que o CSS usa um seletor de irmão como input:checked + .mark?

Porque a caixa visível é um elemento separado do input real, o CSS precisa de uma forma de estilizar esse irmão com base no estado do input. O combinador + seleciona o elemento imediatamente após o input marcado, a técnica padrão para criar estilos personalizados de checkbox e radio button sem JavaScript.

Posso usar isso em um formulário real, não só em uma demo?

Sim — copie o CSS gerado e envolva um input de checkbox real do seu formulário com a mesma estrutura mostrada no HTML/pré-visualização. Como continua sendo uma checkbox nativa, ela é enviada com o formulário exatamente como uma sem estilo, e funciona com sua lógica de validação existente.

Por que a marca de seleção é animada no estilo arredondado?

Uma breve animação de escala na marca faz o estado marcado parecer mais intencional e responsivo do que um aparecimento/desaparecimento instantâneo, um padrão comum em checkboxes de interfaces bem cuidadas. É uma pequena regra @keyframes de CSS incluída junto com o resto do código gerado.

O estilo de interruptor deslizante precisa de HTML diferente?

Não — os três estilos usam a mesma estrutura HTML subjacente (um input de checkbox escondido mais um elemento irmão para a forma visível). Trocar de estilo nesta ferramenta só muda as regras CSS aplicadas a essa mesma estrutura, então você pode trocar de estilo depois sem mexer no seu HTML.