Resumo de IA
Gostaria de personalizar os campos Checkbox e Radio para que se pareçam com botões? Usando CSS, você pode facilmente alterar a exibição desses inputs para botões com cores correspondentes à sua marca específica e que se destacam na página quando o usuário passa o mouse sobre cada seleção e para todas as seleções ativas. Neste tutorial, vamos guiá-lo passo a passo sobre como conseguir isso.
Por padrão, os campos de formulário Checkbox aparecem com uma caixa na frente do rótulo para ser marcada. Os campos de formulário Radio também têm a mesma formatação padrão.
No entanto, com a mágica do CSS, você pode facilmente estilizar esses campos para que se pareçam com botões em vez de apenas caixas para serem marcadas. Neste tutorial, forneceremos o CSS necessário para fazer essa alteração de estilo.
Criando o formulário
Para começar, criaremos um novo formulário e adicionaremos nossos campos. Nosso formulário conterá um único campo Checkbox e um único campo Múltipla Escolha.
À medida que cada um desses campos é adicionado, clique na guia Avançado e, no menu suspenso Layout da Escolha, selecione Em linha.
Adicionando o CSS
Agora é hora de adicionar nossa mágica CSS. Simplesmente copie e cole este CSS em seu site.
Se precisar de ajuda sobre como e onde adicionar CSS ao seu site, consulte este tutorial.
Campos Checkbox e Múltipla Escolha para um formulário específico
Todos os campos Checkbox e Múltipla Escolha para todos os formulários
Alternativamente, você pode alterar todos os seus campos Checkbox e Múltipla Escolha para todos os formulários usando este CSS.
E é tudo o que você precisa para personalizar os campos Checkbox e Radio. Gostaria também de personalizar o campo Números? Dê uma olhada em nosso tutorial sobre Como Remover as Setas no Campo de Números.