Styling von Radio-Buttons und Checkboxen

Welcher Webentwickler kennt dieses Problem nicht. Man erstellt funktionelle und hübsche Formulare, aber sobald Radio-Buttons oder Checkboxen verwendet werden sollen sieht das ganze nicht mehr gut aus. Diese Formular-Elemente lassen sich nicht browserunabhängig mit Stylesheets versehen. Ich war schon länger auf der Suche nach einer praktikablen Lösung um dies zu ändern. Leider waren bisher alle Lösungsvorschläge zu umständlich und nicht sauber implementiert.

Nun bin ich auf eine Javascript+CSS Lösung gestoßen mit dem sich das Styling der Formular-Felder sehr einfach umsetzen lässt. Das Ganze nennt sich CRIR (Checkbox & Radio Input Replacement).

So sah das Formuler einer Applikation, an der ich momentan arbeite, vorher aus:

Nach dem Einsatz von CRIR sieht das Formular so aus:

Folgende Schritte waren notwendig:

1. CRIR herunterladen und das Verzeichnis “crir” im Hauptverzeichnis ablegen
2. Die benötigten Dateien im (X)HTML-Code einbinden

<link href=”crir/crir.css” rel=”stylesheet” type=”text/css” />
<script language=”JavaScript” type=”text/javascript” src=”crir/crir.js”></script>

3. Nun muss man ein <input>-Feld anlegen und folgende Klasse notieren: class=”crirHiddenJS”
4. Fertig!

Getestet wurde mit folgenden Browsern:

- Firefox 2.0.0.9
- Internet Explorer 6/7
- Opera 9.24
- Safari Windows

Bisher konnte ich keine Probleme feststellen und werde dieses Script nun öfters beim “Stylen” von Formularen verwenden.