### [So passen Sie die Stile des Feldes für Mehrfachauswahl an](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/)
**Veröffentlicht:** 6. Februar 2024
**Autor:** Redaktionsteam
**Auszug:** Dieser Artikel zeigt Ihnen, wie Sie die Farben des Feldes für Mehrfachauswahl mit CSS anpassen können.
**Inhalt:**
Möchten Sie die Farbe des Feldes für **Mehrfachauswahl** anpassen? Standardmäßig verwendet dieses Feld Standard-Web-Styles, 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](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "So stylen Sie WPForms mit dem Block-Editor"). 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 tun können.
Die **Schaltflächenstile** des Block-Editors ändern nicht nur die **Senden**-Schaltfläche und das Feld für **Mehrfachauswahl**, sondern auch die Farben des **Kontrollkästchen**-Feldes.
In diesem Artikel werden wir die Magie von benutzerdefiniertem CSS nutzen, um diese Änderungen vorzunehmen.
## Erstellen des Formulars
Zuerst erstellen Sie Ihr Formular und fügen die benötigten Felder hinzu, darunter mindestens ein Feld für **Mehrfachauswahl**.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, [können Sie diese nützliche Anleitung einfach überprüfen](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars").
Nachdem Sie das Feld für **Mehrfachauswahl** 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 für Mehrfachauswahl
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](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu").
```
.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 für **Mehrfachauswahl** einfach anpassen. Wussten Sie, dass Sie die Optionen des Feldes für **Mehrfachauswahl** auch wie Schaltflächen aussehen lassen können? Sehen Sie sich unser Tutorial an [So passen Sie Kontrollkästchen- und Radio-Felder an, damit sie wie Schaltflächen aussehen](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "So passen Sie Kontrollkästchen- und Radio-Felder an, damit sie wie Schaltflächen aussehen").
**Kategorien:** Felder
**Schlagwörter:** CSS
---