Ein benutzerdefiniertes Kontrollkästchen kann man mit HTML und CSS erstellen. Hier ist ein einfaches Beispiel:
Wir beginnen mit dem HTML-Markup:
```html
```
Wir haben ein `input`-Element vom Typ `checkbox` innerhalb eines `label`-Elements und daneben ein `span`-Element, das wir als unser benutzerdefiniertes Kontrollkästchen gestalten werden.
Jetzt gestalten wir mit CSS:
```css
/* Verstecke das originale Checkbox */
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Erstelle ein neues Kontrollkästchen */
.checkmark {
position: relative;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* Wenn das Kontrollkästchen überprüft ist, ändere die Hintergrundfarbe */
.custom-checkbox input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Füge das “Häkchen” hinzu, wenn das Kontrollkästchen überprüft wird */
.custom-checkbox input:checked ~ .checkmark:after {
content: “”;
position: absolute;
left: 10px;
top: 6px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
}
```
Dieses Beispiel beinhaltet ein sehr einfaches Design. Du kannst natürlich die Farben und Größen nach Belieben ändern, um es an das Design deiner Webseite anzupassen.
