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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.