Zum Anpassen von Kontrollkästchen in CSS können Sie die Default-Stile von HTML-Formularelementen überschreiben. Es gibt keine direkte Möglichkeit, Checkboxes zu ändern, daher verwenden die meisten Entwickler eine Kombination aus CSS und einer Reihe von Bildern.
Also hier ist eine Methode, um Checkboxen anzupassen:
1. Verstecken Sie zunächst das Standard-Kontrollkästchen. Sie können es einfach unsichtbar machen und trotzdem klickbar.
```CSS input[type=“checkbox”] { appearance: none; /* Oder -webkit-appearance: none; -moz-appearance: none; */ position: absolute; margin: 0; z-index: -1; opacity: 0; /* Macht das Kontrollkästchen unsichtbar */ } ```2. Nun fügen Sie ein Label zum Kontrollkästchen hinzu und nutzen Pseudo-Elemente, um das Design zu ändern.
```HTML ``` ```CSS label { position: relative; display: inline-block; width: 50px; /* Breite des neuen Kontrollkästchens */ height: 25px; /* Höhe des neuen Kontrollkästchens */ background: grey; /* Hintergrund des neuen Kontrollkästchens */ } label:before { content: ‘’; position: absolute; width: 25px; /* Breite des Kontrollpunkts */ height: 25px; /* Höhe des Kontrollpunkts */ left: 0; bottom: 0; background: white; /* Hintergrund des Kontrollpunkts */ transition: .2s; } input:checked + label:before { left: 25px; /* Position des Kontrollpunkts nach dem Klicken */ } ```Dies ist eine ziemlich einfache Methode, um Kontrollkästchen zu ändern. Sie können sie noch weiter ausbauen und auf Ihre speziellen Bedürfnisse anpassen.
