Anpassen der Kontrollkästchen-Feldstile

Möchten Sie die Farbe des Checkbox-Feldes anpassen? Standardmäßig verwendet dieses Feld das Standard-Webdesign, um das Feld in Ihrem Formular anzuzeigen. In diesem Artikel führen wir Sie durch, wie einfach das mit der Macht von CSS ist!

Wenn Sie jedoch den WPForms Block Editor verwenden, können Sie diese Stile einfach anpassen, ohne benutzerdefiniertes CSS zu benötigen. Um mehr darüber zu erfahren, werfen Sie bitte einen Blick auf diese nützliche Anleitung. Wenn Sie die Feldstile und die Schaltflächenstile ändern, können Sie im Block-Editor genau das Gleiche erreichen, was Sie mit dem benutzerdefinierten CSS in diesem Artikel können.

In diesem Artikel werden wir die Magie von benutzerdefiniertem CSS nutzen, um diese Änderungen vorzunehmen.

Erstellung des Formulars

Zuerst erstellen Sie Ihr Formular und fügen die benötigten Felder hinzu, darunter mindestens ein Checkbox-Feld.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, können Sie diese nützliche Anleitung einfach überprüfen.

Nachdem Sie das Checkbox-Feld hinzugefügt haben, klicken Sie auf die Registerkarte Erweitert und fügen Sie in die CSS-Klassen special-checkbox-buttons ein. Wir werden dies als Auslöser verwenden, um unser benutzerdefiniertes CSS aufzurufen.

Anpassen des Stils des Checkbox-Feldes

Nachdem Sie das Formular gespeichert haben, können Sie nun Ihr CSS hinzufügen. Wenn Sie nicht sicher sind, wo oder wie Sie benutzerdefiniertes CSS zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial zur Unterstützung.

.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;
}

Dieses CSS ändert die Farbe des Rahmens und der Auswahl auf #e27730, fügt aber auch eine kleine Animation hinzu, wenn Auswahlen getroffen werden.

Ob Sie die Block-Editor-Formatierung oder das benutzerdefinierte CSS verwenden, Sie können die Farben des Checkbox-Feldes einfach anpassen. Suchen Sie nach der gleichen Funktionalität für das Multiple Choice-Feld? Werfen Sie einen Blick auf unseren Artikel über So passen Sie die Stile des Multiple Choice-Feldes an.