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
- einfaches Viereck erstellen
- Statuswechsel anzeigen
- erweitertes Styling
Selektor und ausblenden
Zuerst muss die Standard Checkbox ausgeblendet werden.
input[type="checkbox"] {
display:none;
}
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.
/* selektiert das Label Tag nach jeder Checkbox */
input[type="checkbox"] + label::before {
width: 15px;
height: 15px;
background-color: #000;
display: block;
content: "";
float: left;
margin-right: 5px;
}Statuswechsel anzeigen
Damit für den Benutzer die Änderung sichtbar wird, soll die Farbe auf Rot wechseln, wenn die Checkbox angeklickt wird.
input[type="checkbox"]:checked+label::before {
background-color: #c72f2f;
}erweitertes Styling
Mit ein par weiteren CSS Eigenschaften kann man mit CSS sich schöne Buttons erstellen.
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label::before {
width: 15px;
height: 15px;
border-radius: 15px;
border: 2px solid #8cad2d;
background-color: #fff;
display: block;
content: "";
float: left;
margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
box-shadow: inset 0px 0px 0px 3px #fff;
background-color: #8cad2d;
}