CSS Checkbox Update 2016
Da der Artikel nun 5 Jahre alt ist und sich CSS & Design weiterentwickelt haben, hab ich mal ein Update gemalt. Custom Radio-Button und Checkboxen mit pure™ CSS, barrierefrei & überhaupt:
See the Pen CSS3 Custom Checkbox, Radio Input and Select by Sven Wolfermann (@maddesigns) on CodePen.
— ab hier der alte Artikel von 2011 —
Um es vorweg zu nehmen, beim Stylen von Input-Feldern muss man aus Usability-Gesichtspunkten Vorsicht walten lassen. Der normale User ist an das Aussehen der Formular-Elemente in seinem OS/Browser gewöhnt. Wenn die Input-Felder nun stark von der gewohnten Umgebung abweichen, ist er skeptischer beim Ausfüllen von Formularen und bricht u.U. den Prozess sogar ganz ab. (Quelle: Internet)
Auch wenn man es wollte, einige Formular-Elemente lassen sich zudem nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type="file"]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.
Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13 weiterlesen