Estilo de caixa de seleção para formulários impressionantes

Neste guia, aprenderá a personalizar o design das caixas de verificação nos seus formulários Web. Muitas vezes, as caixas de verificação não são tão apelativas como gostaria que fossem e podem não corresponder ao seu esquema de cores ou tema. Os desenhos padrão das caixas de verificação não podem ser facilmente alterados. No entanto, existem várias formas de personalizar o aspeto para que se adapte melhor ao seu sítio Web.

O objetivo não é apenas conseguir um design apelativo, mas também manter a funcionalidade da caixa de verificação. Neste guia, explico passo a passo como pode estilizar as caixas de verificação.

Principais conclusões

• É possível personalizar o aspeto das caixas de verificação com CSS, ocultando o formulário predefinido e criando um elemento personalizado.
• Para o estado ativado da caixa de verificação, pode utilizar pseudo-classes CSS para mostrar designs diferentes para a caixa de verificação activada e não activada.
• Também pode utilizar caracteres Unicode ou imagens para criar uma caixa de verificação mais apelativa.

Guia passo-a-passo

Passo 1: Criar a primeira caixa de verificação

Em primeiro lugar, crie uma caixa de verificação simples no seu documento HTML. Por defeito, a caixa de verificação tem um design azulado. Esta é a base sobre a qual se irá basear.

Passo 2: Ajustar a cor de fundo

Para adaptar a caixa de verificação às suas necessidades, pode alterar a cor de fundo. Pode utilizar uma propriedade CSS chamada cor de destaque para definir uma nova cor. Defina-a para vermelho, por exemplo, para ver as alterações que faz.

Passo 3: Ajustar o tamanho da caixa de verificação

Para além da cor, também pode alterar o tamanho da caixa de verificação. Uma caixa de verificação maior pode ficar melhor no seu design e facilitar a interação com ela. Pode personalizar isto utilizando CSS.

Passo 4: Substitua a caixa de verificação pelo seu próprio elemento

Se não gostar da marca de verificação padrão, substitua a caixa de verificação pelo seu próprio elemento. Para o fazer, oculte o elemento de entrada nativo e utilize um span personalizável. Primeiro, remova o estilo da caixa de verificação.

Passo 5: Estilizar a caixa no seu estado normal

Agora, adicione o elemento span que representa a caixa para a caixa de verificação. Defina a largura e a altura da caixa, uma cor de margem branca e certifique-se de que o espaçamento à direita é adequado para não interagir com outros elementos.

Passo 6: Criar o estilo do estado ativado

Para alterar o estilo da caixa de verificação marcada, é necessário utilizar pseudo-classes CSS. Quando a caixa de verificação está marcada, pode alterar o span. Utilize o seletor :checked para definir o que deve acontecer à caixa quando está marcada. Para o fazer, utilize o seletor input:checked + .box e altere a cor de fundo.

Passo 7: Caracteres Unicode para a marca de verificação

Em vez de ter apenas uma caixa colorida, pode também adicionar uma marca de verificação. Utilize um carácter Unicode para a marca de verificação e coloque-o no intervalo. Utilize o pseudoelemento ::after para adicionar o carácter e estilize-o adequadamente com CSS.

Passo 8: Fazer ajustes finos

Para garantir que a marca de verificação tem bom aspeto, pode ser necessário ajustar o preenchimento e o posicionamento. Isto é particularmente importante para garantir que o carácter Unicode fica bem no centro da caixa.

Passo 9: Utilizar alternativas para apresentação

Em vez de uma marca de verificação, também pode utilizar imagens para ativar o estilo. Pode inserir uma imagem quando a caixa de verificação está activada e outra imagem quando não está activada.

Passo 10: Verificar a funcionalidade

Certifique-se de que a funcionalidade da caixa de verificação se mantém mesmo depois de ter sido estilizada. Deve certificar-se de que a visibilidade e a interatividade do elemento de entrada são mantidas, mesmo que esteja visualmente oculto.

Resumo

Neste guia, aprendeu a personalizar as caixas de verificação nos seus formulários Web. Utilizando pseudo-classes CSS, pode alterar o design da caixa de verificação, tornando a caixa de verificação padrão invisível e apresentando os seus próprios elementos. A utilização de caracteres Unicode e de imagens oferece-lhe muitas possibilidades criativas.