### [Come personalizzare gli stili del campo a scelta multipla](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/)
**Pubblicato:** 6 febbraio 2024
**Autore:** Team editoriale
**Estratto:** Questo articolo ti mostrerà come personalizzare i colori del campo a scelta multipla utilizzando CSS.
**Contenuto:**
Vuoi personalizzare il colore del campo **Scelta multipla**? Per impostazione predefinita, questo campo utilizzerà gli stili web standard per visualizzare il campo nel tuo modulo. In questo articolo, ti spiegheremo quanto è facile farlo con la potenza del CSS!
Tuttavia, se stai utilizzando l'**Editor a blocchi di WPForms**, puoi facilmente regolare questi stili senza bisogno di CSS personalizzato. Per saperne di più, [dai un'occhiata a questa utile guida](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Come stilizzare WPForms usando l'editor a blocchi"). Quando modifichi gli **Stili del campo** e gli **Stili dei pulsanti**, puoi ottenere esattamente la stessa cosa nell'editor a blocchi che puoi ottenere con il CSS personalizzato in questo articolo.
L'uso degli **Stili dei pulsanti** dell'editor a blocchi non cambia solo il pulsante **Invia** e il campo **Scelta multipla**, ma cambierà anche i colori del campo **Casella di controllo**.
In questo articolo, lavoreremo utilizzando la magia del CSS personalizzato per apportare queste modifiche.
## Creazione del modulo
Per iniziare, creerai il tuo modulo e aggiungerai i campi necessari, che includeranno almeno un campo **Scelta multipla**.
Se hai bisogno di assistenza nella creazione del tuo modulo, [puoi facilmente consultare questa utile guida](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo").
Una volta aggiunto il campo **Scelta multipla**, fai clic sulla scheda **Avanzate** e all'interno delle **Classi CSS** aggiungi `special-radio-buttons`. Useremo questo come trigger per richiamare il nostro CSS personalizzato.
## Personalizzazione dello stile del campo Scelta multipla
Una volta salvato il modulo, puoi aggiungere il tuo CSS. Se non sei sicuro di dove o come aggiungere CSS personalizzato al tuo sito, [consulta questo tutorial per assistenza](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms").
```
.special-radio-buttons input[type=radio] {
-webkit-appearance: none !important;
appearance: none !important;
background-color: #ffffff !important;
margin: 0 !important;
color: #e27730 !important;
width: 1.15em !important;
height: 1.15em !important;
border: 0.15em solid #e27730 !important;
border-radius: 50% !important;
transform: translateY(-0.075em) !important;
display: grid !important;
place-content: center !important;
}
.special-radio-buttons input[type=radio]:checked:before {
transform: scale(1) !important;
}
.special-radio-buttons input[type=radio]:before {
content: "" !important;
border-radius: 50% !important;
transform: scale(0) !important;
transition: 120ms transform ease-in-out !important;
box-shadow: inset 1em 1em #e27730 !important;
border: 1px solid #e27730 !important;
}
.special-radio-buttons input[type=radio]:checked:after {
background-color: #e27730 !important;
}
```
Questo CSS cambierà il colore del bordo e della selezione in `#e27730`, ma aggiungerà anche una piccola animazione quando vengono effettuate le selezioni.
Sia che tu utilizzi gli stili dell'editor a blocchi o il CSS personalizzato, puoi facilmente personalizzare i colori del campo **Scelta multipla**. Sapevi che puoi anche far sì che le opzioni del campo **Scelta multipla** assomiglino a pulsanti? Dai un'occhiata al nostro tutorial su [Come personalizzare i campi Casella di controllo e Radio per farli assomigliare a pulsanti](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "Come personalizzare i campi Casella di controllo e Radio per farli assomigliare a pulsanti").
**Categorie:** Campi
**Tag:** CSS
---