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.
- HTML Code
- Selektor und ausblenden
- einfaches Viereck erstellen
- Statuswechsel anzeigen
- erweitertes Styling
- checked mit Bildern
- Checkbox wie ein Switch
HTML Code
Vorab erstmal den HTML Code für eine Checkbox und das Label
<input id="confirm" type="checkbox" /><label for="confirm">Label content</label>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.
[type="checkbox"] + label {
position: absolute;
}
[type="checkbox"] {
position: relative;
left: 15px;
top: -4px;
z-index: 0;
-webkit-appearance: none;
}
[type="checkbox"] + label::before {
width: 15px;
height: 15px;
background-color: #000;
display: block;
content: "";
float: left;
margin-right: 5px;
z-index: 5;
position: relative;
}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.
[type="checkbox"] {
position: relative;
left: 15px;
top: -4px;
z-index: 0;
-webkit-appearance: none;
}
[type="checkbox"] + label {
position: absolute;
}
[type="checkbox"] + label::before {
width: 15px;
height: 15px;
border-radius: 5px;
border: 2px solid #8cad2d;
background-color: #fff;
display: block;
content: "";
float: left;
margin-right: 5px;
z-index: 5;
position: relative;
}
[type="checkbox"]:checked+label::before {
box-shadow: inset 0px 0px 0px 3px #fff;
background-color: #8cad2d;
}checked mit Bildern
Es ist auch möglich ein Bild zu verwenden, das Bild als background-image setzen und schon wird es verwendet.
[type="checkbox"] + label {
position: absolute;
}
[type="checkbox"] {
position: relative;
left: 15px;
top: -4px;
z-index: 0;
-webkit-appearance: none;
}
[type="checkbox"] + label::before {
width: 22px;
height: 18px;
background-image: url("unchecked.png");
display: block;
content: "";
float: left;
margin-right: 5px;
z-index: 5;
position: relative;
}
[type="checkbox"]:checked+label::before {
background-image: url("checked.png");
}Checkbox wie ein Switch
[type="checkbox"] {
position: relative;
left: 30px;
top: 0px;
z-index: 0;
-webkit-appearance: none;
}
[type="checkbox"] + label {
position: relative;
display: block;
cursor: pointer;
font-family: sans-serif;
font-size: 24px;
line-height: 1.3;
padding-left:70px;
position: relative;
margin-top: -30px;
}
[type="checkbox"] + label:before {
width: 60px;
height: 30px;
border-radius: 30px;
border: 2px solid #ddd;
background-color: #EEE;
content: "";
margin-right: 15px;
transition: background-color 0.5s linear;
z-index: 5;
position: absolute;
left: 0px;
}
[type="checkbox"] + label:after {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #fff;
content: "";
transition: margin 0.1s linear;
box-shadow: 0px 0px 5px #aaa;
position: absolute;
left: 2px;
top: 2px;
z-index: 10;
}
[type="checkbox"]:checked + label:before {
background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
margin: 0 0 0 30px;
}CSS Tutorial
Voriger Schritt: CSS mehrere Transition versetzt starten
Zur Turtorial-Reihe: CSS Tutorial
Nächster Schritt: CSS Übungsaufgaben [Animation & Verlauf]
