Kommen wir nach langer Zeit mal wieder zu einem kleinen CSS3-Tutorial.
Manche von euch haben sicherlich schon einmal mit den Widrigkeiten beim Stylen von Checkboxen oder Radiobuttons zu kämpfen gehabt. Mit dieser Anleitung möchte ich euch eine Möglichkeit aufzeigen dieses Problem in den Griff zu bekommen.
Fangen wir mit dem HTML-Code an:
<input id="c1" type="checkbox" name="cc" /> <label for="c1">styled Checkbox</label>
Wir legen ein Input-Tag mit dem Typ “checkbox” an, versehen es mit einer ID und einem Name-Attribut. Für dieses Input-Tag definieren wir ein Label-Tag mit dem HTML5-Attribur “for” und verweisen damit auf die ID der Checkbox. Ein leeres Span-Element im Label dient später im CSS zum ansprechen.
Kommen wir nun zum CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 45px;
height: 23px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(checkbox_sprite.png) 1px -1px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label span {
background: url(checkbox_sprite.png) -44px -1px no-repeat;
}
Als erstes verstecken wir die Standard-Checkboxen mit “display: none;”. Dann wird das Span-Element formatiert und mit einem Hintergrundbild versehen. Abschließend wird über das HTML5 pseudo Element “:checked” das Hintergrundbild ausgetauscht, wenn die Checkbox angeklickt wird.
Was passiert hier nun? Das Span-Element ist Teil des Labels der versteckten Standard-Checkbox, welches durch das Attribut “for” mit dieser verknüpft ist. Klickt man nun auf das Span-Element, wird der Status der Checkbox auf “checked” gesetzt und es greifen die dafür definierten CSS-Deklarationen. In unserem Fall wird das Hintergrundbild des Span-Elements ausgetauscht.
Hier das Ganze in Aktion (Ihr könnt sicherlich bessere Checkboxen stylen 
):
Viel Spaß beim Nachbauen!
Artikel, die euch auch interessieren könnten:
The post CSS3: Checkboxen stylen appeared first on eMeLPe WebDes!gn.
