CRIR – Formulare gestalten
Jeder Webentwickler kennt dieses Problem. 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).
Folgende Schritte waren notwendig:
1. CRIR herunterladen und das Verzeichnis “crir” im Hauptverzeichnis des Webservers 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 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.