Styling del campo a discesa

Vuoi dare ai tuoi campi a discesa di WPForms un aspetto personalizzato? Mentre i browser applicano la propria formattazione predefinita ai campi a discesa, puoi usare il CSS per creare un aspetto unico che corrisponda al design del tuo sito.

Questa guida ti mostrerà come personalizzare colori, bordi, frecce e altro per i tuoi campi a discesa.

Configurazione del tuo modulo

Inizia creando un modulo con un campo a discesa. Per questo esempio, creeremo un semplice modulo di contatto con:

• Campo nome
• Campo email
• Campo a discesa (per “Come sei venuto a conoscenza di noi?”)
• Campo paragrafo (per commenti)

Se hai bisogno di aiuto per creare il tuo modulo, consulta la nostra guida su come creare il tuo primo modulo.

Formattazione dello sfondo e del testo

Ecco come personalizzare l'aspetto di base del tuo campo a discesa. Ricorda di sostituire 1000 con l'ID del tuo modulo:

Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, consulta questo tutorial su come aggiungere stili CSS personalizzati.

/* 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;
}

Personalizzazione della freccia a discesa

Puoi sostituire la freccia a discesa predefinita con un'immagine personalizzata:

/* 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;
}

Aggiunta di icone Font Awesome

Per un look più moderno, puoi usare le icone Font Awesome come freccia a discesa. Per prima cosa, installa il plugin Font Awesome se non l'hai già fatto.

/* 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;
}

Quando si formattano i campi a discesa:

• Gli elementi Select (a discesa) non possono utilizzare direttamente pseudo-elementi come ::before e ::after
• Devi selezionare ID specifici del modulo e del campo per la formattazione personalizzata
• Il supporto del browser varia per determinate proprietà CSS
• Gli ID dei campi si trovano nel pannello Opzioni campo del tuo modulo

Se hai bisogno di aiuto per trovare gli ID del tuo modulo o campo, consulta la nostra guida su come trovare gli ID del modulo e del campo.

E questo è tutto ciò che ti serve per formattare il campo a discesa su WPForms. Successivamente, vorresti anche cambiare la formattazione dei campi Checkbox e Scelta multipla? Dai un'occhiata al nostro tutorial su Come personalizzare i campi Checkbox e Radio per farli sembrare pulsanti.