Adicionar Imagens a Rótulos de Checkbox Usando CSS

Gostaria de adicionar imagens aos rótulos dos seus checkboxes nos seus formulários? Pode melhorar o apelo visual do seu formulário adicionando imagens de fundo ou ícones baseados em fontes aos rótulos dos seus checkboxes usando CSS. Por defeito, todos os rótulos de formulário exibirão apenas o texto que tem dentro do construtor de formulários.

Este guia mostrar-lhe-á dois métodos diferentes para conseguir isto.

Seguindo as instruções do artigo, é suficientemente fácil usar imagens, bem como texto, para os rótulos do seu campo de formulário Checkbox usando uma imagem ou mesmo ícones baseados em fontes.

Configuração do Formulário

Primeiro, crie o seu formulário e adicione um campo de formulário Checkbox. Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre criação do seu primeiro formulário.

Tome nota do ID do seu formulário e do ID do campo, pois precisará deles ao adicionar o CSS. Se não tiver a certeza de como encontrar estes IDs, por favor reveja o nosso guia sobre como encontrar IDs de formulário e campo.

Adicionar Imagens de Fundo

O primeiro método usa imagens de fundo carregadas na sua biblioteca de mídia do WordPress. Se não tiver a certeza de como adicionar CSS personalizado ao seu site, por favor consulte o nosso tutorial sobre adicionar CSS ao seu site.

Se quiser adicionar uma imagem de fundo aos rótulos do campo de formulário Checkbox, use o seguinte CSS.

Substitua os seguintes valores no código CSS:

• Linha 1: Substitua 1000 pelo ID do seu formulário
• Linha 1: Substitua field_25 pelo ID do seu campo
• Linha 4: Substitua o URL pelo caminho da sua imagem
• Linhas 6-7: Ajuste a altura e a largura nas linhas 6-7 com base no tamanho da sua imagem

Para cada opção de checkbox adicional, copie todo o bloco CSS e altere choice-1 para choice-2, choice-3, e assim por diante. Pode também usar imagens diferentes para cada escolha alterando o URL da imagem de fundo.

Usar Ícones Baseados em Fontes

O segundo método usa ícones de fontes, que podem ser mais leves e flexíveis do que imagens de fundo. Primeiro, certifique-se de que tem uma biblioteca de ícones de fontes instalada no seu tema WordPress. Se precisar de ajuda com isto, consulte o guia da WPBeginner sobre como adicionar fontes de ícones ao WordPress.

Também pode usar imagens para os rótulos dos checkboxes usando uma família de fontes de ícones baseada em fontes.

Tal como com o CSS anterior, estamos a direcionar o ID do formulário 1000 e o ID do campo 25. No CSS abaixo verá o -1000- que se refere ao ID do formulário.

ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
    font-family: dashicons;
    content: "\f173";
    display: inline-block;
    color: #000000;
    font-size: 16px;
    margin: 0px 5px;
    position: relative;
    top: 2px;
}

Perguntas Frequentes

P: Posso usar este CSS para o campo de formulário Multiple Choice?

R: Absolutamente! Estas mesmas classes CSS são usadas também para o campo de formulário Multiple Choice. Apenas se lembre de atualizar os IDs do formulário e do campo no seu CSS.

P: Por que é que isto não parece estar a funcionar para o meu formulário?

R: Certifique-se de que atualizou o CSS para usar os seus próprios IDs de formulário e campo. Depois de confirmar isto e a sua imagem não aparecer, certifique-se de verificar o URL da imagem que está a tentar adicionar no seu CSS.

Para obter assistência a encontrar os seus IDs de formulário e campo, consulte esta documentação útil.

P: Posso usar isto para o campo Dropdown?

R: Neste momento, este CSS funcionará corretamente apenas com os seguintes campos:

• Caixa de Verificação
• Escolha múltipla
• Checkbox de Pagamento
• Múltipla Escolha de Pagamento

Isto deve-se principalmente à forma como os navegadores modernos renderizam os campos dropdown e o markup HTML.

E é tudo! Adicionou com sucesso uma imagem aos rótulos do seu Checkbox. Gostaria também de personalizar a aparência dos ícones de Avaliação? Dê uma vista de olhos ao nosso tutorial sobre Como Personalizar a Aparência dos Ícones de Avaliação.