So ändern Sie die Hintergrundfarbe eines Kontrollkästchens

Durch die Anpassung der Hintergrundfarbe des Checkbox-Elements können Sie auf einfache Weise optisch einheitlichere und professionellere Formulare in Ihrem Shopify-Shop erstellen.

In diesem Tutorial lernen Sie, wie Sie die Hintergrundfarbe eines Checkbox-Elements in GemPages mithilfe von benutzerdefiniertem Code ändern können.

Bevor du anfängst

Bevor Sie dieser Anleitung folgen, stellen Sie sicher, dass Sie Folgendes bereits haben:

• Eine in GemPages erstellte Seite
• A Kontrollkästchen-Elementt wurde Ihrer Seite hinzugefügt
• Zugriff auf den GemPages-Editor

Schritt 1: Öffnen Sie das Bedienfeld für benutzerdefinierten Code.

Suchen Sie im GemPages-Editor das Kontrollkästchen-Element, das Sie anpassen möchten.

Klicken Sie mit der rechten Maustaste auf das Kontrollkästchen-Element.

Wählen Sie dann: Benutzerdefinierter Code

Dadurch wird das Bedienfeld „Benutzerdefinierter Code“ für das ausgewählte Element geöffnet.

Schritt 2: CSS-Code hinzufügen

Fügen Sie folgenden Code in den Editor für benutzerdefinierten Code ein:

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

  Akzentfarbe: #000000;

}

Wichtige Hinweise

1. Ersetzen .element-class

Sie müssen Folgendes ersetzen:

.element-class

mit dem tatsächlichen Klassennamen Ihres Checkbox-Elements.

Die Elementklasse finden Sie in der oberen linken Ecke des Bedienfelds „Benutzerdefinierter Code“.

Ejemplo:

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

  Akzentfarbe: #1a73e8;

}

2. Ersetzen #000000 Mit Ihrem Farbcode

Ersetzen Sie den HEX-Wert durch die Farbe Ihrer bevorzugten Checkbox.

Beispiele: