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.

SEO und HTML5 Tags

Die neuen HTML5 Tags werden in der Zukunft eine große Rolle in der Suchmaschinenoptimierung spielen…

Warum?

In HTML5 gibt es viele neue Tags wie: <header>, <footer>, <section> und <article>. Diese Tags erleichtern es Suchmaschinen, die Bereiche einer Webseite zu unterteilen.

(Aus diesem Grund baue ich gerade die neuen HTML5 Tags in meine Webseiten ein.)