HTML-Checkboxen stylen mit CSS3

Jeder Frontender kennt es, jeder Grafikdesigner hasst es und selten versteht es der Kunde. Checkboxen oder Radiobuttons sind im Standard nicht schön anzuschauen und werden von verschiedenen Browsern unterschiedlich dargestellt. Aber auch hierfür gibt es eine einfache Lösung des Problems dank CSS3.

Wir haben folgende HTML-Struktur:

<div class="form-item-test-checkbox">
  <input id="test-checkbox" type="checkbox" name="test-checkbox" />
  <label for="test-checkbox">Ich bin eine Checkbox</label>
​</div>

Wir haben eine einfache HTML-Struktur mit einem Wrapper (form-item-test-checkbox), einem Inputfeld mit dem Typ "checkbox" und einem Label was auf das Inputfeld verweist.

Kommen wir zur CSS.

Als erstes verstecken wir das Inputfeld mit "display: none;".

input[type="checkbox"] {
  display: none;
​}

Das Inputfeld benötigen wir nicht mehr, da wir es im nächsten Schritt mit einer Grafik austauschen.

input[type="checkbox"] + label {
  display: block;
​  background: url(YourCheckboxSprite.png) no-repeat 0 0;
  cursor: pointer;
  padding: 0 0 0 30px;
​}

Da das Label mit dem Inputfeld verknüpft ist, können wir das HTML5 Pseudo Element ":checked" verwenden und somit das Hintergrundbild für den "Aktiv"-Status austauschen.

input[type="checkbox"]:checked + label {
​  background-position: 0 -30px;
​}

Mehr gibt es schon gar nicht zu tun. Somit sehen eure Radiobuttons oder Checkboxen wieder gut aus und Ihr könnt Sie ganz nach Euren wünschen anpassen.

Hier ein kleines Beispiel.