Comment personnaliser les styles du champ à cocher

Souhaitez-vous personnaliser la couleur du champ Case à cocher ? Par défaut, ce champ utilisera le style Web standard pour afficher le champ dans votre formulaire. Dans cet article, nous allons vous montrer à quel point il est facile de le faire grâce à la puissance du CSS !

Cependant, si vous utilisez l'Éditeur de blocs WPForms, vous pouvez facilement ajuster ces styles sans avoir besoin de CSS personnalisé. Pour en savoir plus à ce sujet, veuillez consulter ce guide utile. Lorsque vous modifiez les Styles de champ et les Styles de bouton, vous pouvez obtenir exactement la même chose dans l'éditeur de blocs que ce que vous pouvez faire avec le CSS personnalisé dans cet article.

Dans cet article, nous allons travailler à travers l'utilisation de la magie du CSS personnalisé pour apporter ces modifications.

Création du formulaire

Pour commencer, vous créerez votre formulaire et ajouterez les champs dont vous avez besoin, y compris au moins un champ Case à cocher.

Si vous avez besoin d'aide pour créer votre formulaire, vous pouvez facilement consulter ce guide utile.

Une fois que vous avez ajouté le champ Case à cocher, cliquez sur l'onglet Avancé et dans les Classes CSS, ajoutez special-checkbox-buttons. Nous l'utiliserons comme déclencheur pour appeler notre CSS personnalisé.

Personnalisation du style du champ Case à cocher

Une fois que vous avez enregistré le formulaire, vous pouvez maintenant ajouter votre CSS. Si vous ne savez pas où ni comment ajouter du CSS personnalisé à votre site, veuillez consulter ce tutoriel pour obtenir de l'aide.

.special-checkbox-buttons input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: #e27730 !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid #e27730 !important;
  border-radius: 0.15em !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

.special-checkbox-buttons input[type="checkbox"]::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em #e27730 !important;
	transform-origin: bottom left !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

.special-checkbox-buttons input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.special-checkbox-buttons input[type=checkbox]:checked:after {
	content: none !important;
}

Ce CSS changera la couleur de la bordure et de la sélection en #e27730, mais ajoutera également une petite animation lors des sélections.

Que vous utilisiez le style de l'éditeur de blocs ou le CSS personnalisé, vous pouvez facilement personnaliser les couleurs du champ Case à cocher. Vous recherchez la même fonctionnalité pour le champ Choix multiples ? Consultez notre article sur Comment personnaliser les styles du champ Choix multiples.