Estilizando o campo suspenso

Deseja dar aos seus campos suspensos do WPForms uma aparência personalizada? Embora os navegadores apliquem seu próprio estilo padrão aos campos suspensos, você pode usar CSS para criar uma aparência exclusiva que combine com o design do seu site.

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

Configuração de seu formulário

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

• Campo de nome
• Campo de e-mail
• Campo suspenso (para "Como você ficou sabendo sobre nós?")
• 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.

Estilizar o plano de fundo e o texto

Veja como personalizar a aparência básica de seu campo suspenso. Lembre-se de substituir 1000 com seu ID de formulário:

Se precisar de ajuda para saber 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;
}

Personalização da seta suspensa

Você pode substituir a seta 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;
}

Adição de ícones Font Awesome

Para obter uma aparência mais moderna, você pode usar os ícones do Font Awesome como sua seta suspensa. Primeiro, instale o plug-in Font Awesome, caso ainda não o tenha feito.

/* 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 suspensos:

• Os elementos Select (dropdown) não podem usar diretamente pseudoelementos como ::before e ::after
• Você deve direcionar IDs de formulários e campos específicos para o estilo personalizado
• O suporte do navegador varia para determinadas propriedades CSS
• Os IDs de campo podem ser encontrados no painel Field Options (Opções de campo ) de seu formulário

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

E isso é tudo o que você precisa para estilizar o campo Dropdown no WPForms. Em seguida, você gostaria de alterar também o estilo dos campos Caixa de seleção e Múltipla escolha? Confira nosso tutorial sobre Como personalizar campos de caixa de seleção e rádio para que se pareçam com botões.