In diesem Beitrag zeige ich, wie man Checkboxen selektiert und stylen kann. Ich werde die System-Schaltflächen ausblenden und mit CSS selbst gestaltete hinzufügen.
Selektor und ausblenden
Zuerst muss die Standard Checkbox ausgeblendet werden.
Nach dem benutzen des CSS wird die Checkbox selbst entfernt.
einfaches Viereck erstellen
Zum einfügen des Vierecks verwende ich das ::before Statement, es fügt vor dem ausgewählten HTML Objekt ein Element hinzu.
Statuswechsel anzeigen
Damit für den Benutzer die Änderung sichtbar wird, soll die Farbe auf Rot wechseln, wenn die Checkbox angeklickt wird.
erweitertes Styling
Mit ein par weiteren CSS Eigenschaften kann man mit CSS sich schöne Buttons erstellen.