a11y.skipToMainContent
1

Gerador de Caixa de Verificação CSS

Crie caixas de seleção personalizadas com visualização ao vivo — escolha o estilo de marca de verificação, ajuste de cores e dimensionamento e, em seguida, copie o CSS.

px
px
px

Preview

HTML

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Checkbox Generator

  1. Escolha um estilo de marca de verificação (tique, cruz, preenchimento ou menos).
  2. Defina o tamanho, o raio de borda e as cores dos estados marcados/desmarcados.
  3. Copie o CSS gerado e aplique a classe na sua caixa de seleção.

O que é {nome}?

As caixas de seleção de Browser-default parecem diferentes em cada plataforma e são difíceis de style. Esta ferramenta permite- lhe criar uma caixa de verificação personalizada com controlo total sobre o tamanho, cores, raio de borda e o próprio ícone de marca de verificação (marca, cruz, preenchimento ou menos).

Toda a saída é CSS puro — nenhum JavaScript necessário para o estilo visual. Use a classe CSS gerada em seus formulários para uma aparência consistente entre plataformas.

Advertisement

FAQ

Isto substitui a opção nativa?
O CSS esconde a aparência nativa da caixa de seleção e substitui-a por seu design personalizado, preservando a acessibilidade total.
Funcionará com submissões de formulários?
Sim — a entrada subjacente é uma caixa de verificação real. O CSS só muda a aparência, não o comportamento.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement