Wunderbare Checkboxen

Formulareingabefelder sind nativ und deren look & feel ist dementsprechend abhängig von dem Betriebssystem und dem Browser, in dem das Eingabefeld angezeigt wird. Gerade native Checkboxen und Radiobuttons leiden unter folgenden Nachteilen:

  1. Layout ist plattformübergreifend uneinheitlich
  2. Zoomunfähigkeit (sieht neben einem zoomfähigen Label sehr ungünstig aus)
  3. Keine Kontrolle über Farbe, Form und Verhalten des Feldes

Diese Probleme können mit ein wenig CSS behoben werden, ohne die Funktionalität zu ändern.
Ausgehend von folgendem HTML für 3 Checkboxen:

<input id="html" type="checkbox" name="type[]" checked="checked">
<label for="html">HTML</label>
<input id="css" type="checkbox" name="type[]">
<label for="css">CSS</label>
<input id="javascript" type="checkbox" name="type[]">
<label for="javascript">Javascript</label>

und das Resultat:

Zum direkten Vergleich dazu die gestylten Checkboxen (live demo - einfach anklicken):

Dafür müssen zunächst einmal die nativen Checkboxen visuell verschwinden:

input[type=checkbox] { opacity: 0; }

Dann werden die leeren Checkboxen gezeichnet:

input[type=checkbox] + label:before {
  width: 17px;
  height: 17px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 3px;
  margin-left: -20px;
  content: "";
  border: 1px solid #888;
  border-radius: 3px;
  background-color: #fff;
}

mit einer Höhe und Breite von 17 Pixel. Wichtig ist, dass ihr content mit einem leeren String gesetzt wird. Der Rest ist dann reines layout: Hintergrundfarbe, Rahmen und Position (sie sollte um etwas mehr als ihre Breite nach links verschoben werden).
Um den focus Effekt zu simulieren, kann der entsprechende Pseudo Selektor genutzt werden:

input[type=checkbox]:focus + label:before { 
  outline: thin dotted; 
  outline: 5px auto -webkit-focus-ring-color; // for WebKit
}

Das zweite Checkboxelement ist das Häkchen und wird mit einer skalierbaren Icon-Schriftart dargestellt. Dafür muss die entsprechende Schriftart (z.B. AwesomeFonts) eingebunden werden. In diesem Beispiel wurde die Bootstrap eigene Glyphicon-Halflings genutzt:

@font-face{
  font-family: 'Glyphicons Halflings';
  src: url(path/to/glyphicon.eot);
  src: url(path/to/glyphicon.svg) format('svg'),
    url(path/to/glyphicon.woff) format('woff'),
    url(path/to/glyphicon.ttf) format('ttf')
}

Für das Häkchen wird der :after Pseudo Selektor genutzt:

input[type=checkbox] + label:after {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 3px;
  padding-top: 1px;
  margin-left: -20px;
  font-size: 11px;
  color: #555;
}

Wenn die Checkbox (in Wahrheit eigentlich das Label) geclickt wurde, muss der Hintergrund der Checkbox eingefärbt und das Häkchen angezeigt werden:

input[type=checkbox]:checked + label:before {
  background-color: #22760c;
  border-color: #22760c;
}
input[type=checkbox]:checked + label:after {
  font-family: "Glyphicons Halflings";
  content: '\e013';
  color: #FFF;
  top: 3px;
}

Wichtig ist der korrekte Schrifticon-Code im content.
Zum Schluss bekommt das Label noch etwas Abstände:

input[type=checkbox] + label {
  display: inline-block;
  position: relative; 
  padding-left: 5px; 
  margin-right: 30px;
}

Für Radiobuttons kann das gleiche Prinzip angewendet werden, nur dass dafür noch nicht einmal ein Schrifticon benötigt wird.
Vorher:

Nachher:

Verwende einfach den Browser HTML Inspektor, um das verwendete CSS im Detail herauszufinden.
Fazit:

  1. Layout ist plattformübergreifend einheitlich
  2. Zoomfähig
  3. Volle Kontrolle über Farbe, Form und Verhalten

Wunderbar!