### [Ajout de transitions aux sélections de cases à cocher et de choix multiples](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **Publié :** 16 juin 2020 **Auteur :** Umair Majeed **Extrait :** Ce tutoriel vous montrera comment utiliser CSS pour ajouter des transitions sympas aux champs de formulaire de cases à cocher et de choix multiples. **Contenu :** Voulez-vous rendre les champs **Cases à cocher** et **Choix multiples** de votre formulaire plus attrayants ? En ajoutant des transitions fluides lors de la sélection des options, vous pouvez améliorer l'attrait visuel de vos formulaires et l'interaction utilisateur. Ce guide vous montrera comment implémenter des transitions élégantes à l'aide de CSS. ## Configuration de votre formulaire Tout d'abord, créez un formulaire avec des champs **Cases à cocher** et/ou **Choix multiples**. Si vous avez besoin d'aide pour créer votre formulaire, consultez notre [guide sur la création de votre premier formulaire](https://wpforms.com/docs/creating-first-form/). Notez l'ID de votre formulaire et les ID de vos champs, car vous en aurez besoin pour le CSS. Si vous n'êtes pas sûr de la manière de trouver ces ID, veuillez consulter notre [guide sur la façon de trouver les ID de formulaire et de champ.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id) ## Ajout de styles de transition Pour implémenter les transitions, vous devrez ajouter du CSS à votre site. Si vous n'êtes pas sûr de la manière d'ajouter du CSS personnalisé, veuillez consulter notre guide sur [l'ajout de CSS à un site WordPress](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). Le CSS ci-dessus ne sera appliqué qu'à l'ID de formulaire **999**. Cela devra être modifié pour correspondre à votre propre ID de formulaire. Les ID de champ **field\_27** et **field\_3** devront également être mis à jour pour correspondre aux ID de champ de vos champs **Cases à cocher** et **Choix multiples** dans votre formulaire. Chaque champ **Case à cocher** et **Choix multiples** a son propre ID, donc si vous en avez plus de deux dans votre formulaire, vous n'aurez qu'à dupliquer le CSS, changer le numéro d'ID de champ et séparer chacun d'eux par une virgule. Pour en savoir plus sur les transitions CSS, [vous pouvez consulter cette documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). Et voilà, vous avez ajouté avec succès le CSS pour créer une transition pour les **cases à cocher** et les **choix multiples** à votre formulaire. Souhaitez-vous ajouter du CSS qui fera ressortir les champs de formulaire texte lorsque le visiteur tape dedans ? Consultez notre tutoriel sur [Comment ajouter du CSS au focus du champ de formulaire](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/ "Comment ajouter du CSS au focus du champ de formulaire"). **Catégories :** Style **Tags :** CSS ---