Estilização do Campo de Lista Suspensa

Quer dar aos seus campos de lista pendente do WPForms um aspeto personalizado? Embora os navegadores apliquem o seu próprio estilo predefinido aos campos de lista pendente, pode usar CSS para criar uma aparência única que corresponda ao design do seu site.

Este guia mostrar-lhe-á como personalizar cores, bordas, setas e muito mais para os seus campos de lista pendente.

Configurar o Seu Formulário

Comece por criar um formulário com um campo de lista pendente. Para este exemplo, criaremos um formulário de contacto simples com:

• Campo de Nome
• Campo de e-mail
• Campo de lista pendente (para “Como nos descobriu?”)
• Campo de parágrafo (para comentários)

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

Estilizar o Fundo e o Texto

Veja como personalizar a aparência básica do seu campo de lista pendente. 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;
}

Personalizar a Seta da Lista Pendente

Pode substituir a seta de lista pendente predefinida 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;
}

Adicionar Ícones Font Awesome

Para um aspeto mais moderno, pode usar ícones Font Awesome como seta da sua lista pendente. 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 pendente:

• Os elementos Select (lista pendente) não podem usar diretamente pseudo-elementos como ::before e ::after
• Tem de direcionar 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 o nosso guia sobre como encontrar IDs de formulário e campo.

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