### [Comment personnaliser les champs de cases à cocher et de boutons radio pour qu'ils ressemblent à des boutons](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/) **Publié le :** 30 octobre 2020 **Auteur :** Umair Majeed **Extrait :** Dans cet article, nous vous montrerons comment utiliser CSS pour styliser les champs de cases à cocher et de boutons radio afin qu'ils apparaissent comme des boutons. **Contenu :** Souhaitez-vous personnaliser les champs **Cases à cocher** et **Boutons radio** pour qu'ils ressemblent à des boutons ? En utilisant [CSS](https://www.wpbeginner.com/glossary/css/ "Qu'est-ce que : CSS"), vous pouvez facilement modifier l'affichage de ces champs en boutons dont les couleurs correspondent à votre image de marque spécifique et qui ressortent même de la page lorsque l'utilisateur survole chaque sélection et pour toutes les sélections actives. Dans ce tutoriel, nous allons vous guider étape par étape pour y parvenir. Par défaut, les champs de formulaire **Cases à cocher** apparaissent avec une case devant l'étiquette à cocher. Les champs de formulaire **Boutons radio** ont également le même style de formulaire par défaut. Cependant, avec la magie du CSS, vous pouvez facilement styliser ces champs pour qu'ils ressemblent à des boutons au lieu de simples cases à cocher. Dans ce tutoriel, nous vous fournirons le CSS nécessaire pour effectuer ce changement de style. ## Création du formulaire Pour commencer, nous allons créer un nouveau formulaire et ajouter nos champs. Notre formulaire contiendra un seul champ **Case à cocher** ainsi qu'un seul champ **Choix multiples**. Lorsque chacun de ces champs est ajouté, cliquez sur l'onglet **Avancé** et dans le menu déroulant **Disposition des choix**, sélectionnez **En ligne**. ## Ajout du CSS Il est maintenant temps d'ajouter notre magie CSS. Copiez et collez simplement ce CSS sur votre site. Si vous avez besoin d'aide sur comment et où ajouter du CSS à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms"). #### Champs de cases à cocher et de choix multiples pour un formulaire spécifique N'oubliez pas de changer `form#wpforms-form-1000` pour qu'il corresponde à l'ID de votre propre formulaire. Pour obtenir de l'aide sur la façon de trouver l'ID de votre formulaire spécifique, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). #### Tous les champs de cases à cocher et de choix multiples pour tous les formulaires Alternativement, vous pouvez modifier tous vos champs **Cases à cocher** et **Choix multiples** pour tous les formulaires en utilisant ce CSS. N'oubliez pas de mettre à jour toute référence de couleur dans le CSS pour qu'elle corresponde aux couleurs que vous souhaitez utiliser. Et c'est tout ce dont vous avez besoin pour personnaliser les champs **Cases à cocher** et **Boutons radio**. Souhaitez-vous également personnaliser le champ **Nombres** ? Consultez notre tutoriel sur [Comment supprimer les flèches sur le champ Nombres](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "Comment supprimer les flèches sur le champ Nombres"). **Catégories :** Champs **Tags :** CSS ---