Estilizar o campo suspenso

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

Este guia mostra-lhe como personalizar cores, contornos, setas e muito mais para os seus campos pendentes.

Configurar o seu formulário

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

• Campo do nome
• Campo de correio eletrónico
• Campo pendente (para "Como soube da nossa existência?")
• Campo de parágrafo (para comentários)

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

Estilizar o fundo e o texto

Eis como personalizar o aspeto básico do seu campo pendente. Lembre-se de substituir 1000 com o seu ID de formulário:

Se precisar de ajuda para saber como e onde adicionar CSS personalizadas, 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 do menu suspenso

Pode substituir a seta 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 do Font Awesome

Para um aspeto mais moderno, pode utilizar ícones Font Awesome como seta para o menu pendente. Em primeiro lugar, 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 utilizar diretamente pseudo-elementos como ::before e ::after
• É necessário direcionar IDs de formulários e campos específicos para o estilo personalizado
• O suporte do navegador varia para certas propriedades CSS
• Os IDs de campo podem ser encontrados no painel Opções de campo do seu formulário

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

E isso é tudo que você precisa para estilizar o campo Dropdown no WPForms. Em seguida, você gostaria de alterar também o estilo nos 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 se parecerem com botões.