Estilizando o Campo de Suspenso

Quer dar aos seus campos de lista suspensa do WPForms um visual personalizado? Embora os navegadores apliquem sua própria formatação padrão aos campos de lista suspensa, você pode usar CSS para criar uma aparência única que corresponda ao design do seu site.

Este guia mostrará como personalizar cores, bordas, setas e muito mais para seus campos de lista suspensa.

Configurando Seu Formulário

Comece criando um formulário com um campo de lista suspensa. Para este exemplo, criaremos um formulário de contato simples com:

• Campo de nome
• Campo de E-mail
• Campo de lista suspensa (para “Como você nos conheceu?”)
• Campo de parágrafo (para comentários)

Se precisar de ajuda para criar seu formulário, consulte nosso guia sobre como criar seu primeiro formulário.

Estilizando o Plano de Fundo e o Texto

Veja como personalizar a aparência básica do seu campo de lista suspensa. Lembre-se de substituir 1000 pelo ID do seu formulário:

Se precisar de ajuda sobre como e onde adicionar CSS personalizado, consulte este tutorial sobre como adicionar estilos CSS personalizados.

/* Basic dropdown styling */
form#wpforms-form-1000 select {
    background-color: #b95d52;
    color: #fff;
    border: 1px solid #b95d52;
    border-radius: 5px;
    padding: 10px;
}

/* Hover and focus states */
form#wpforms-form-1000 select:hover,
form#wpforms-form-1000 select:focus {
    background-color: #fff;
    color: #b95d52;
    box-shadow: none;
}

Personalizando a Seta da Lista Suspensa

Você pode substituir a seta de lista suspensa padrão por uma imagem personalizada:

/* Remove default arrow */
form#wpforms-form-1000 select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    
    /* Add custom arrow image */
    background-image: url('your-arrow-image.png');
    background-repeat: no-repeat;
    background-position: right .7em center;
    background-size: 25px 25px;
}

/* Hide default arrow in IE */
form#wpforms-form-1000 select::-ms-expand {
    display: none;
}

Adicionando Ícones do Font Awesome

Para um visual mais moderno, você pode usar ícones do Font Awesome como seta da sua lista suspensa. Primeiro, instale o plugin Font Awesome se ainda não o fez.

/* Hide default arrow and prepare for Font Awesome */
#wpforms-form-1000-field_24-container select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 30px;
}

/* Add Font Awesome arrow */
#wpforms-form-1000-field_24-container::after {
    font-family: fontawesome;
    content: "\f149";  /* Font Awesome down arrow code */
    position: absolute;
    top: 53%;
    left: 95%;
    pointer-events: none;
}

Ao estilizar campos de lista suspensa:

• Elementos Select (lista suspensa) não podem usar diretamente pseudo-elementos como ::before e ::after
• Você deve segmentar IDs específicos de formulário e campo para estilização personalizada
• O suporte do navegador varia para certas propriedades CSS
• Os IDs dos campos podem ser encontrados no painel Opções do Campo do seu formulário

Se precisar de ajuda para encontrar os IDs do seu formulário ou campo, consulte nosso guia sobre como encontrar IDs de formulário e campo.

E é tudo o que você precisa para estilizar o campo Lista Suspensa no WPForms. Em seguida, você gostaria de alterar a estilização também nos campos Checkbox e Múltipla Escolha? Confira nosso tutorial sobre Como Personalizar Campos de Checkbox e Radio para Parecerem Botões.