Andreas Hommel » Javascript http://andreashommel.net Fri, 18 Mar 2011 09:11:26 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 CRIR – Formulare gestalten http://andreashommel.net/crir-formulare-gestalten-mit-css-und-javascript/ http://andreashommel.net/crir-formulare-gestalten-mit-css-und-javascript/#comments Wed, 21 Nov 2007 19:39:07 +0000 Andreas http://www.andreashommel.net/?p=51 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.

]]> http://andreashommel.net/crir-formulare-gestalten-mit-css-und-javascript/feed/ 0