### [Aggiungere transizioni alle selezioni di casella di controllo e scelta multipla](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **Pubblicato:** 16 giugno 2020 **Autore:** Umair Majeed **Estratto:** Questo tutorial ti mostrerà come utilizzare i CSS per aggiungere alcune interessanti transizioni ai campi modulo Casella di controllo e Scelta multipla. **Contenuto:** Vorresti rendere i campi **Casella di controllo** e **Scelta multipla** del tuo modulo più coinvolgenti? Aggiungendo transizioni fluide quando le opzioni vengono selezionate, puoi migliorare l'attrattiva visiva dei tuoi moduli e l'interazione dell'utente. Questa guida ti mostrerà come implementare transizioni eleganti utilizzando i CSS. ## Impostazione del modulo Innanzitutto, crea un modulo con campi **Casella di controllo** e/o **Scelta multipla**. Se hai bisogno di aiuto per creare il tuo modulo, consulta la nostra [guida alla creazione del tuo primo modulo](https://wpforms.com/docs/creating-first-form/). Prendi nota dell'ID del modulo e degli ID dei campi, poiché ti serviranno per i CSS. Se non sei sicuro di come trovare questi ID, consulta la nostra [guida su come trovare gli ID dei moduli e dei campi.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id) ## Aggiunta di stili di transizione Per implementare le transizioni, dovrai aggiungere CSS al tuo sito. Se non sei sicuro di come aggiungere CSS personalizzati, consulta la nostra guida su [come aggiungere CSS personalizzati a un sito WordPress](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). I CSS sopra verranno applicati solo all'ID del modulo **999**. Questo dovrà essere modificato per corrispondere al tuo ID modulo. Anche gli ID dei campi **field\_27** e **field\_3** dovranno essere aggiornati per corrispondere agli ID dei campi per i tuoi campi **Casella di controllo** e **Scelta multipla** nel tuo modulo. Ogni campo **Casella di controllo** e **Scelta multipla** ha il proprio ID, quindi se ne hai più di due nel tuo modulo, dovresti semplicemente duplicare i CSS, cambiare il numero dell'ID del campo e separare ciascuno con una virgola. Per saperne di più sulle transizioni CSS, [puoi consultare questa documentazione](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). E questo è tutto, hai aggiunto con successo i CSS per creare una transizione per **Casella di controllo** e **Scelta multipla** al tuo modulo. Vorresti aggiungere alcuni CSS che faranno risaltare i campi di testo del modulo quando il visitatore digita al loro interno? Dai un'occhiata al nostro tutorial su [Come aggiungere CSS al focus del campo modulo](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/ "Come aggiungere CSS al focus del campo modulo"). **Categorie:** Styling **Tag:** CSS ---