Comment modifier la couleur d'arrière-plan d'une case à cocher

Personnaliser la couleur d'arrière-plan de l'élément case à cocher est un moyen simple de créer des formulaires plus cohérents et professionnels dans votre boutique Shopify.

Dans ce tutoriel, vous apprendrez comment modifier la couleur d'arrière-plan d'un élément Checkbox dans GemPages à l'aide de code personnalisé.

Avant de commencer

Avant de suivre ce tutoriel, assurez-vous d'avoir déjà :

• Une page créée dans GemPages
• A Élément de case à cochert ajouté à votre page
• Accès à l'éditeur GemPages

Étape 1 : Ouvrez le panneau de code personnalisé

Dans l'éditeur GemPages, repérez l'élément Checkbox que vous souhaitez personnaliser.

Cliquez avec le bouton droit sur l'élément Case à cocher.

Sélectionnez ensuite : Code personnalisé

Cela ouvrira le panneau de code personnalisé pour l'élément sélectionné.

Étape 2 : Ajouter le code CSS

Collez le code suivant dans l'éditeur de code personnalisé :

.element-class input[type="checkbox"] {

  couleur d'accentuation : #000000 ;

}

Remarques importantes

1. Remplacez .element-class

Vous devez remplacer :

.element-class

avec le nom de classe réel de votre élément Checkbox.

Vous trouverez la classe de l'élément dans le coin supérieur gauche du panneau Code personnalisé.

Exemple :

.gf-checkbox-123 input[type="checkbox"] {

  couleur d'accentuation : #1a73e8 ;

}

2. Remplacez #000000 Avec votre code couleur

Remplacez la valeur HEX par la couleur de case à cocher de votre choix.

Exemples :