Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Caminho da tarefa / da entrada ao resultado

Defina o tamanho do controle

Roda localmente · Nada é enviado

Como Gerador de caixas de seleção CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar uma caixa de seleção CSS personalizada

  1. 01

    Defina o tamanho do controle

    A marca escala a partir do espaço interno da borda, não do tamanho externo. A pré-visualização e a exportação usam a mesma forma de bordas CSS. Clique na pré-visualização ou foque nela e pressione Espaço para alternar seu estado nativo de marcado.

  2. 02

    Modele o quadro

    Use um controle de 18–64 px e uma borda de 1–8 px. Pelo menos 8 px precisam sobrar dentro da borda para a marca. Combinações inválidas limpam a pré-visualização e desativam a exportação.

  3. 03

    Escolha as cores de cada estado

    Escolha a Cor da borda para o contorno em repouso e a Cor quando marcado para o estado preenchido. Mantenha a Cor quando marcado escura o bastante para contrastar com a marca branca atrás dela, porque a marca é sempre branca.

  4. 04

    Pré-visualize os dois estados

    Ative Mostrar estado marcado para comparar os lados em repouso e preenchido na pré-visualização ao vivo. A marca entra com uma transição de 160 ms e um pequeno aumento de escala: exatamente o movimento que o CSS exportado reproduz entre os estados.

  5. 05

    Copie ou baixe o CSS

    Pressione Copiar CSS ou Baixar .css para salvar toolars-checkbox.css. O conjunto de regras mantém um input real por baixo — appearance: none apenas o repinta — e os estados :focus-visible e :disabled vêm incluídos na exportação.

  6. 06

    Mantenha o HTML nativo

    Aplique a classe .checkbox diretamente a um elemento input real e acompanhe-o de um label, como faria com qualquer caixa de seleção. O foco de teclado, o comportamento de clique e os anúncios da tecnologia assistiva continuam funcionando porque nada semântico é substituído. O fundo branco em repouso faz parte da regra, então o estado vazio continua legível sobre superfícies coloridas.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de caixas de seleção CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de caixas de seleção CSS realmente faz

Uma página de configurações cheia de caixas de seleção padrão parece inacabada, e um design system precisa do mesmo controle em cada formulário sem arrastar uma dependência de JavaScript. Como o CSS exportado preserva um elemento input genuíno, o foco de teclado e os anúncios do leitor de tela continuam funcionando — enquanto as cores de marca em teste nunca saem da aba do navegador. Um toque rápido no interruptor da pré-visualização confirma os dois lados da interação antes de copiar qualquer código. A mesma regra serve para um único formulário ou para toda uma biblioteca de componentes.

Perguntas frequentes

A caixa de seleção continua acessível?
Sim. O HTML continua sendo um elemento input real; appearance: none apenas substitui sua pintura. A exportação inclui um contorno :focus-visible de 3 px na sua cor de destaque e um estado :disabled esmaecido, e o estado marcado continua sendo o nativo que a tecnologia assistiva anuncia.
Por que minha largura de borda foi rejeitada?
Use um controle de 18–64 px e uma borda de 1–8 px. Pelo menos 8 px precisam sobrar dentro da borda para a marca. Combinações inválidas limpam a pré-visualização e desativam a exportação.
Como o tamanho da marca de seleção é calculado?
A marca escala a partir do espaço interno da borda, não do tamanho externo. A pré-visualização e a exportação usam a mesma forma de bordas CSS. Clique na pré-visualização ou foque nela e pressione Espaço para alternar seu estado nativo de marcado.
O que acontece quando a caixa muda de estado?
A marca escala de zero ao tamanho total em uma transição de transformação de 160 ms enquanto o fundo se preenche com a sua Cor quando marcado. Com prefers-reduced-motion a transição é removida e o estado simplesmente muda de imediato, então nada anima para usuários sensíveis a movimento.
O que é fixo na exportação e o que posso mudar?
O fundo em repouso e a marca são sempre brancos, então escolha uma Cor quando marcado com contraste suficiente contra o branco. O contorno de foco de 3 px, seu deslocamento e o estado :disabled com metade da opacidade são valores fixos que você pode editar livremente depois de colar a regra.
Algo é enviado para algum lugar?
Não. Tudo é renderizado localmente na aba atual, nenhuma conta é necessária e nenhum valor entra em armazenamento, registros ou rede. Pressione Redefinir para voltar aos valores padrão.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar

Gerador de padrões de fundo CSS

CSS Background Pattern Generator

Componha fundos de pontos, grade ou diagonais só com gradientes CSS — sem arquivo de imagem — com controles de ladrilho, marca e cor.

Criar