Adicionando Imagens aos Rótulos de Caixa de Seleção Usando CSS

Você gostaria de adicionar imagens aos rótulos das caixas de seleção em seus formulários? Você pode aprimorar o apelo visual do seu formulário adicionando imagens de fundo ou ícones baseados em fontes aos rótulos das suas caixas de seleção usando CSS. Por padrão, todos os rótulos de formulário exibirão apenas o texto que você tem dentro do construtor de formulários.

Este guia mostrará dois métodos diferentes para conseguir isso.

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

Configurando o Formulário

Primeiro, crie seu formulário e adicione um campo de formulário Caixa de Seleção. Se precisar de ajuda para criar seu formulário, confira nosso guia sobre como criar seu primeiro formulário.

Anote o ID do seu formulário e o ID do campo, pois você precisará deles ao adicionar o CSS. Se você não tem certeza de como encontrar esses IDs, revise nosso guia sobre como encontrar IDs de formulário e campo.

Adicionando Imagens de Fundo

O primeiro método usa imagens de fundo carregadas na sua biblioteca de mídia do WordPress. Se você não tem certeza de como adicionar CSS personalizado ao seu site, confira nosso tutorial sobre como adicionar CSS ao seu site.

Se você quiser adicionar uma imagem de fundo aos rótulos do campo de formulário Caixa de Seleção, 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 a 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 caixa de seleção adicional, copie todo o bloco CSS e altere choice-1 para choice-2, choice-3 e assim por diante. Você também pode usar imagens diferentes para cada escolha, alterando a URL da imagem de fundo.

Usando Ícones Baseados em Fontes

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

Você também pode usar imagens nos rótulos das caixas de seleção usando uma fonte de ícone baseada em fonte.

Assim como no CSS anterior, estamos visando o ID do formulário 1000 e o ID do campo 25. No CSS abaixo, você 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 Múltipla Escolha?

R: Com certeza! As mesmas classes CSS são usadas para o campo de formulário Múltipla Escolha também. Apenas lembre-se de atualizar os IDs do formulário e do campo no seu CSS.

P: Por que isso não parece estar funcionando para o meu formulário?

R: Por favor, certifique-se de que você atualizou o CSS para usar seus próprios IDs de formulário e campo. Depois de confirmar isso e sua imagem não estiver aparecendo, por favor, verifique o URL da imagem que você está tentando adicionar no seu CSS.

Para obter ajuda para encontrar seus IDs de formulário e campo, consulte esta documentação útil.

P: Posso usar isso para o campo Dropdown?

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

• Caixa de seleção
• Múltipla Escolha
• Pagamento com Checkbox
• Múltipla Escolha de Pagamento

Isso se deve principalmente à forma como os navegadores modernos renderizam campos de dropdown e a marcação HTML.

E é isso! Você adicionou com sucesso uma imagem aos rótulos do seu Checkbox. Você também gostaria de personalizar a aparência dos ícones de Avaliação? Dê uma olhada em nosso tutorial sobre Como Personalizar a Aparência dos Ícones de Avaliação.