### [Come personalizzare le caselle di controllo e i pulsanti di opzione per farli sembrare dei pulsanti](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/)

**Pubblicato:** 30 ottobre 2020
**Autore:** Umair Majeed

**Estratto:** In questo articolo vi mostreremo come utilizzare i CSS per personalizzare lo stile delle caselle di controllo e dei pulsanti di opzione in modo che appaiano come pulsanti. 

**Contenuto:**

Vorreste personalizzare le caselle di controllo e i pulsanti di opzione in modo che appaiano come pulsanti? Utilizzando [CSS](https://www.wpbeginner.com/glossary/css/ "Che cos'è: CSS") puoi facilmente modificare la visualizzazione di questi input trasformandoli in pulsanti con colori abbinati al tuo specifico marchio e persino farli risaltare sulla pagina quando l'utente passa con il mouse su ciascuna selezione e per tutte le selezioni attive. In questo tutorial ti guideremo passo dopo passo su come ottenere questo risultato.

Per impostazione predefinita, i campi del modulo **Casella di controllo** appaiono con una casella davanti all'etichetta da selezionare. Anche i campi del modulo **Radio** hanno lo stesso stile predefinito.

![I campi casella di controllo e a scelta multipla hanno un proprio CSS di base predefinito per lo styling](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)Tuttavia, grazie alla magia dei CSS, puoi facilmente modificare lo stile di questi campi in modo che appaiano come pulsanti invece che come semplici caselle da spuntare. In questo tutorial ti forniremo i CSS necessari per apportare questa modifica di stile.

## Creazione del modulo

Per iniziare, creeremo un nuovo modulo e aggiungeremo i nostri campi. Il nostro modulo conterrà un singolo campo **Casella di controllo** e un singolo campo **Scelta multipla**.

Man mano che questi campi vengono aggiunti, clicca sulla scheda **Avanzate** e dal menu a tendina **Layout delle opzioni**, seleziona **Inline**.

![aggiungi i tuoi campi e imposta il layout di scelta dei campi casella di controllo e a scelta multipla su Inline dalla scheda Avanzate](https://wpforms.com/wp-content/uploads/2020/10/wpforms-choice-layout-inline.jpg)## Aggiunta del CSS

Ora è il momento di aggiungere la nostra magia CSS. Basta copiare e incollare questo CSS sul tuo sito.

Se hai bisogno di aiuto su come e dove aggiungere il CSS al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms").

#### Campi casella di controllo e a scelta multipla per un modulo specifico

Ricordati di cambiare `form#wpforms-form-1000` in modo che corrisponda al tuo ID del modulo. Per assistenza su come trovare il tuo ID del modulo specifico, [dai un'occhiata a questo tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

#### Tutti i campi casella di controllo e a scelta multipla per tutti i moduli

In alternativa, puoi modificare tutti i campi **Casella di controllo** e **Scelta multipla** per tutti i moduli utilizzando questo CSS.

![Utilizzando i CSS puoi personalizzare i campi casella di controllo e radio in modo che assomiglino a pulsanti](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-buttons-css.jpg)Ricordati solo di aggiornare eventuali riferimenti ai colori in qualsiasi CSS in modo che corrispondano ai colori che desideri utilizzare.

E questo è tutto ciò che ti serve per personalizzare i campi **Casella di controllo** e **Radio**. Vorresti personalizzare anche il campo **Numeri**? Dai un'occhiata al nostro tutorial su [Come rimuovere le frecce dal campo Numeri](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "Come rimuovere le frecce dal campo Numeri").

**Categorie:** Campi

**Tag:** CSS

---