Pular para o conteúdo
Toolars
Explorar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como criar uma caixa de seleção CSS personalizada

  1. 01

    Defina o tamanho do controle

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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. 24 Modelos · Marcado · Cor

  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

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

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. 24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
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?
Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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?
Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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?
Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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.

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

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

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar

Gerador de padrões de fundo CSS

CSS Background Pattern Generator

64 padrões de fundo: 16 geometrias × quatro arranjos; ajuste cores e tamanho do mosaico.

Criar