So passen Sie die Stile des Multiple Choice-Feldes an

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

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 Feld Multiple Choice.

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

Sobald Sie das Feld Multiple Choice hinzugefügt haben, klicken Sie auf die Registerkarte Erweitert und fügen Sie unter CSS-Klassen special-radio-buttons hinzu. Wir werden dies als Auslöser verwenden, um unser benutzerdefiniertes CSS aufzurufen.

Anpassen des Stils des Feldes Multiple Choice

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-radio-buttons input[type=radio] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    color: #e27730 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    border: 0.15em solid #e27730 !important;
    border-radius: 50% !important;
    transform: translateY(-0.075em) !important;
    display: grid !important;
    place-content: center !important;
}

.special-radio-buttons input[type=radio]:checked:before {
    transform: scale(1) !important;
}

.special-radio-buttons input[type=radio]:before {
    content: "" !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em #e27730 !important;
    border: 1px solid #e27730 !important;
}

.special-radio-buttons input[type=radio]:checked:after {
    background-color: #e27730 !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-Stile oder das benutzerdefinierte CSS verwenden, Sie können die Farben des Feldes Multiple Choice einfach anpassen. Wussten Sie schon, dass Sie die Optionen des Feldes Multiple Choice auch wie Schaltflächen aussehen lassen können? Schauen Sie sich unser Tutorial an: Anpassen von Checkbox- und Radio-Feldern, damit sie wie Schaltflächen aussehen.