CSS Tutorial: Personalisierte Checkboxen
Wie ich bereits berichtet habe, nutze ich seit Kurzem personalisierte Checkboxen. In diesem Tutorial möchte ich zeigen, wie das funktioniert.
Zuerst der HTML-Teil:
<span>
<input type="checkbox" name="channel[]" id="channel1" class="checkbox" value="wronnaysblog" />
<label id="lbl1" for="channel1"> Wronnays (B)log</label>
</span>
<span>
<input type="checkbox" name="channel[]" id="channel2" class="checkbox" value="wronnaycms" />
<label id="lbl2" for="channel2"> WronnayCMS</label>
</span>
<span>
<input type="checkbox" name="channel[]" id="channel3" class="checkbox" value="forenhosting" />
<label id="lbl3" for="channel3"> ForenHosting.net</label>
</span>
<span>
<input type="checkbox" name="channel[]" id="channel4" class="checkbox" value="webpage4me" />
<label id="lbl4" for="channel4"> WebPage4.Me</label>
</span>
<span>
<input type="checkbox" name="channel[]" id="channel5" class="checkbox" value="cdm" />
<label id="lbl5" for="channel5"> C D Ms Blog</label>
</span>
Nachfolgend der CSS-Teil:
span {
margin-bottom:1em;
}
input[type="checkbox"],
label[for] {
display:inline-block;
}
label[for] {
margin-left:1em;
cursor:pointer;
}
input[type="checkbox"] {
visibility:hidden;
}
input[type="checkbox"] + label[for] {
margin-left:-1em;
}
input[type="checkbox"] + label[for]:before {
content:"\2713";
color:white;
background:white;
border:1px solid grey;
}
input[type="checkbox"]:checked + label[for]:before {
color:black;
}
input[type="checkbox"] + label[for]:hover:before,
input[type="checkbox"] + label[for]:focus:before {
color:grey;
}
content:“\2713″; zeigt das eigentliche Checkbox-Symbol. Das verstecken wir mit „color:white;“ und „background:white;“. Da wir mit „input[type=“checkbox“]:checked“ definieren, wie die Checkbox angeklickt aussehen soll und da „color:black;“ angegeben wurde, wird das Checkbox-Symbol nach dem Anklicken schwarz. Mit „label[for]:hover:before“, „label[for]:focus:before“ und „color:grey;“ geben wir dann noch an, dass das Checkbox-Symbol bei einem Hover- und Focus-Effekt grau sein soll.