CSS Tutorial: Personalisierte Checkboxen

Datum: Mon, Apr 14, 2014

Tag(s): checkboxen css css3 html HTML5 personalisiert tut Tutorial

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.