Resumo de IA
Gostaria de personalizar os campos Checkbox e Radio para que pareçam botões? Usando CSS, pode facilmente alterar a apresentação destes inputs para botões com cores correspondentes à sua marca específica e que até se destacam da página quando o utilizador passa o rato sobre cada seleção e para quaisquer seleções ativas. Neste tutorial, vamos guiá-lo passo a passo sobre como conseguir isto.
Por defeito, os campos de formulário Checkbox aparecem com uma caixa à frente do rótulo para ser assinalada. Os campos de formulário Radio também têm o mesmo estilo de formulário por defeito.
No entanto, com a magia do CSS, pode facilmente estilizar estes campos para que pareçam botões em vez de apenas caixas para assinalar. Neste tutorial, forneceremos o CSS necessário para fazer esta alteração de estilo.
Criação do formulário
Para começar, criaremos um novo formulário e adicionaremos os nossos campos. O nosso formulário conterá um único campo Checkbox, bem como um único campo Múltipla Escolha.
À medida que cada um destes campos é adicionado, clique no separador Avançado e, no menu suspenso Layout da Escolha, selecione Em linha.
Adicionar o CSS
Agora é hora de adicionar a nossa magia CSS. Simplesmente copie e cole este CSS no 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, pode alterar todos os seus campos Checkbox e Múltipla Escolha para todos os formulários usando este CSS.
E é tudo o que precisa para personalizar os campos Checkbox e Radio. Gostaria também de personalizar o campo Números? Dê uma vista de olhos ao nosso tutorial sobre Como Remover as Setas no Campo de Números.