KI-Zusammenfassung
Möchten Sie Kontrollkästchen und Radio-Felder so anpassen, dass sie wie Schaltflächen aussehen? Mit CSS können Sie die Anzeige dieser Eingaben einfach in Schaltflächen ändern, die farblich auf Ihr spezifisches Branding abgestimmt sind und sogar vom Bildschirm abspringen, wenn der Benutzer jede Auswahl und alle aktiven Auswahlen mit der Maus überfährt. In diesem Tutorial führen wir Sie Schritt für Schritt durch, wie Sie dies erreichen.
Standardmäßig werden Kontrollkästchen-Formularfelder mit einem Feld vor dem Label angezeigt, das angekreuzt werden kann. Radio-Formularfelder haben ebenfalls das gleiche Standard-Formular-Styling.
Mit der Magie von CSS können Sie diese Felder jedoch einfach so gestalten, dass sie wie Schaltflächen aussehen, anstatt nur wie anzukreuzende Felder. In diesem Tutorial geben wir Ihnen das benötigte CSS, um diese Stiländerung vorzunehmen.
Erstellung des Formulars
Zuerst erstellen wir ein neues Formular und fügen unsere Felder hinzu. Unser Formular wird ein einzelnes Kontrollkästchen-Feld sowie ein einzelnes Mehrfachauswahl-Feld enthalten.
Wenn jedes dieser Felder hinzugefügt wird, klicken Sie auf die Registerkarte Erweitert und wählen Sie im Dropdown-Menü Layout der Auswahlmöglichkeiten die Option Inline.
Hinzufügen des CSS
Jetzt ist es an der Zeit, unsere CSS-Magie anzuwenden. Kopieren Sie einfach dieses CSS und fügen Sie es auf Ihrer Website ein.
Wenn Sie Hilfe benötigen, wie und wo Sie CSS zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
Kontrollkästchen und Mehrfachauswahl-Felder für ein bestimmtes Formular
Alle Kontrollkästchen und Mehrfachauswahl-Felder für alle Formulare
Alternativ können Sie alle Ihre Kontrollkästchen und Mehrfachauswahl-Felder für alle Formulare mit diesem CSS ändern.
Und das ist alles, was Sie brauchen, um Kontrollkästchen und Radio-Felder anzupassen. Möchten Sie auch das Zahlen-Feld anpassen? Schauen Sie sich unser Tutorial Anpassen von Zahlenfeldern ohne Pfeile an.