### [Hinzufügen von Übergängen zu Kontrollkästchen und Mehrfachauswahlfeldern](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **Veröffentlicht:** 16. Juni 2020 **Autor:** Umair Majeed **Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie mit CSS coole Übergänge zu Kontrollkästchen- und Mehrfachauswahlfeldern hinzufügen können. **Inhalt:** Möchten Sie die Felder für **Kontrollkästchen** und **Mehrfachauswahl** Ihres Formulars ansprechender gestalten? Durch das Hinzufügen sanfter Übergänge bei der Auswahl von Optionen können Sie die visuelle Attraktivität Ihrer Formulare verbessern und die Benutzerinteraktion steigern. Diese Anleitung zeigt Ihnen, wie Sie stilvolle Übergänge mit CSS implementieren. ## Einrichten Ihres Formulars Erstellen Sie zuerst ein Formular mit Feldern für **Kontrollkästchen** und/oder **Mehrfachauswahl**. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie unsere [Anleitung zum Erstellen Ihres ersten Formulars](https://wpforms.com/docs/creating-first-form/). Notieren Sie sich Ihre Formular-ID und Feld-IDs, da Sie diese für das CSS benötigen. Wenn Sie nicht sicher sind, wie Sie diese IDs finden, lesen Sie bitte unsere [Anleitung zum Auffinden von Formular- und Feld-IDs.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id) ## Hinzufügen von Übergangsstilen Um die Übergänge zu implementieren, müssen Sie Ihrer Website CSS hinzufügen. Wenn Sie nicht sicher sind, wie Sie benutzerdefiniertes CSS hinzufügen, lesen Sie bitte unsere Anleitung zum [Hinzufügen von CSS zu einer WordPress-Website](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). Das obige CSS wird nur auf die Formular-ID **999** angewendet. Diese muss geändert werden, um Ihre eigene Formular-ID anzugeben. Die Feld-IDs **field\_27** und **field\_3** müssen ebenfalls aktualisiert werden, um den Feld-IDs für Ihre **Kontrollkästchen**- und **Mehrfachauswahl**-Felder in Ihrem Formular zu entsprechen. Jedes Feld für **Kontrollkästchen** und **Mehrfachauswahl** hat seine eigene ID. Wenn Sie also mehr als zwei in Ihrem Formular haben, würden Sie das CSS einfach duplizieren, die Feld-ID-Nummer ändern und jede mit einem Komma trennen. Um mehr über CSS-Übergänge zu erfahren, [können Sie sich diese Dokumentation ansehen](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). Und das ist alles, Sie haben erfolgreich das CSS hinzugefügt, um einen Übergang für **Kontrollkästchen** und **Mehrfachauswahl** zu Ihrem Formular zu erstellen. Möchten Sie CSS hinzufügen, das die Textfelder beim Eingeben von Text hervorhebt? Sehen Sie sich unser Tutorial [So fügen Sie CSS zum Formularfeld-Fokus hinzu](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/) an. **Kategorien:** Styling **Schlagwörter:** CSS ---