www.take-weiland.de

Styling von Radiobuttons und Checkboxen via CSS

Die Technik ist relativ simpel: Statt des Input-Elements (<input type="checkbox"> / <input type="radio">), wird das nachfolgende <label>-Element gestylt. Es bekommt durch den Selektor input[type=checkbox] + label bzw. input[type=radio] + label ein Hintergrundbild für den deaktivierten Zustand zugewiesen.

Eine aktivierte Checkbox/ein aktivierter Radiobutton kann über die CSS3-Pseudoklasse :checked angesprochen werden. So ist es möglich, das Hintergrundbild des <label>-Elements anzupassen, wenn die Checkbox/der Radiobutton aktiviert ist. Die zuständigen Selektoren lauten:

input[type=checkbox]:checked + label

bzw.

input[type=radio]:checked + label

Nun können die (ungestylten) Checkboxen/Radiobuttons per

input[type=checkbox], input[type=radio] {
    position:absolute;
    left:-2000px;
}

aus dem Viewport verschoben werden.

Browsersupport: IE 9, Firefox 3+, Google Chrome, Opera