### [So gestalten Sie Kontrollkästchen und Optionsfelder so, dass sie wie Schaltflächen aussehen](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/)

**Veröffentlicht:** 30. Oktober 2020
**Autor:** Umair Majeed

**Auszug:** In diesem Artikel zeigen wir Ihnen, wie Sie mit CSS Checkboxen und Radio-Felder so gestalten können, dass sie wie Schaltflächen aussehen. 

**Inhalt:**

Möchten Sie **Checkboxen** und **Radio-Felder** so anpassen, dass sie wie Schaltflächen aussehen? Mit [CSS](https://www.wpbeginner.com/glossary/css/ "Was ist: CSS") können Sie die Darstellung dieser Eingabefelder ganz einfach in Schaltflächen ändern, deren Farben auf Ihr spezifisches Branding abgestimmt sind und die sogar hervorstechen, wenn der Benutzer mit der Maus über die einzelnen Auswahlmöglichkeiten fährt und bei allen aktiven Auswahlen. In diesem Tutorial führen wir Sie Schritt für Schritt durch die Umsetzung.

Standardmäßig werden **Checkbox**-Formularfelder mit einem Kästchen vor der zu markierenden Beschriftung angezeigt. **Radio**-Formularfelder haben ebenfalls das gleiche Standard-Formular-Styling.

![Checkbox- und Multiple-Choice-Felder verfügen über ein eigenes Standard-CSS für die Gestaltung](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)Mit der Magie von CSS können Sie diese Felder jedoch ganz einfach so gestalten, dass sie wie Schaltflächen aussehen und nicht nur wie Kästchen, die angekreuzt werden müssen. In diesem Tutorial stellen wir Ihnen das CSS zur Verfügung, das Sie für diese Designänderung benötigen.

## Das Formular erstellen

Zunächst erstellen wir ein neues Formular und fügen unsere Felder hinzu. Unser Formular wird ein einzelnes **Checkbox**-Feld sowie ein einzelnes **Multiple-Choice**-Feld enthalten.

Wenn Sie jedes dieser Felder hinzufügen, klicken Sie auf die Registerkarte **Erweitert** und wählen Sie im Dropdown-Menü **Auswahl-Layout** die Option **Inline** aus.

![Fügen Sie Ihre Felder hinzu und stellen Sie das Layout der Checkbox- und Multiple-Choice-Felder auf der Registerkarte „Erweitert“ auf „Inline“ ein](https://wpforms.com/wp-content/uploads/2020/10/wpforms-choice-layout-inline.jpg)## Hinzufügen des CSS

Jetzt ist es an der Zeit, unsere CSS-Magie hinzuzufügen. Kopieren Sie einfach dieses CSS und fügen Sie es in Ihre Website ein.

Wenn Sie Hilfe benötigen, wie und wo Sie CSS zu Ihrer Website hinzufügen können, [lesen Sie bitte dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ „So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu“).

#### Kontrollkästchen- und Mehrfachauswahlfelder für ein bestimmtes Formular

Bitte denken Sie daran, `form#wpforms-form-1000` durch Ihre eigene Formular-ID zu ersetzen. Hilfe beim Auffinden Ihrer spezifischen Formular-ID finden Sie [in diesem Tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

#### Alle Checkbox- und Multiple-Choice-Felder für alle Formulare

Alternativ können Sie alle Ihre **Checkbox**- und **Multiple-Choice**-Felder für alle Formulare mit diesem CSS ändern.

![Mit CSS können Sie Checkbox- und Radio-Felder so anpassen, dass sie wie Schaltflächen aussehen](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-buttons-css.jpg)Denken Sie nur daran, alle Farbangaben im CSS an die Farben anzupassen, die Sie verwenden möchten.

Und das ist alles, was Sie brauchen, um **Checkbox**- und **Radio**-Felder anzupassen. Möchten Sie auch das **Zahlen**-Feld anpassen? Schau dir unser Tutorial zum Thema [So entfernst du die Pfeile im Zahlenfeld](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "So entfernst du die Pfeile im Zahlenfeld") an.

**Kategorien:** Felder

**Tags:** CSS

---