Stilizzazione del campo a discesa

Volete dare ai campi a discesa di WPForms un aspetto personalizzato? Mentre i browser applicano il loro stile predefinito ai campi a discesa, potete usare i CSS per creare un aspetto unico che si adatti al design del vostro sito.

Questa guida mostra come personalizzare colori, bordi, frecce e altro ancora per i campi a discesa.

Impostazione del modulo

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

• Campo del nome
• Campo e-mail
• Campo a discesa (per "Come ha saputo di noi?")
• Campo paragrafo (per i commenti)

Se avete bisogno di aiuto per creare il vostro modulo, consultate la nostra guida sulla creazione del vostro primo modulo.

Stilizzazione dello sfondo e del testo

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

Se avete bisogno di aiuto su come e dove aggiungere i CSS personalizzati, consultate questo tutorial sull'aggiunta di 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

È possibile 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, potete utilizzare le icone di Font Awesome come frecce a discesa. Innanzitutto, installate il plugin Font Awesome, se non l'avete ancora 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 stilizzano i campi a discesa:

• Gli elementi di selezione (a discesa) non possono utilizzare direttamente pseudo-elementi come ::before e ::after
• È necessario puntare su ID specifici di moduli e campi per lo stile personalizzato.
• Il supporto dei browser varia per alcune proprietà CSS
• Gli ID dei campi si trovano nel pannello Opzioni campo del modulo.

Se avete bisogno di aiuto per trovare gli ID dei moduli o dei campi, consultate la nostra guida per trovare gli ID dei moduli e dei campi.

E questo è tutto ciò che serve per creare lo stile del campo a discesa in WPForms. Volete poi modificare lo stile dei campi Checkbox e Multiple Choice? Consultate il nostro tutorial su Come personalizzare i campi Checkbox e Radio per farli sembrare pulsanti.