Dass insbesondere Select-Boxen in HTML so gut wie nicht mit CSS Befehlen angepasst werden können ist wahrscheinlich jedem bekannt. Dennoch haben wir uns um eine vernünftige Lösung dieser Eigenheit gekümmert, welche wir euch Heute präsentieren. Zudem ist es nun möglich auch Checkboxen mit eigenen Grafiken zu versehen.
Select-Boxen können im Normalfall nur minimal mit CSS angepasst werden, sehen in nahezu jedem Browser anders aus und passen optisch des öfteren einfach nicht zum Rest der Formular-Elemente.
Das leidige Thema „Select-Boxen anpassen“ hat nun endlich ein Ende.
Wir haben ein Script entwicklet, welches dieses Thema nun endgültig bequem und nahezu vollautomatisch löst. Das vorgestellte Script basiert auf JavaScript und Mootools, somit ist das Select- und Checkbox-Styling nur für Besucher mit aktiviertem JavaScript sichtbar. Für alle anderen nutzer bleiben natürlich die Original-Elemente erhalten.
Die Funktion
Die Funktion ist für den Web-Entwickler sehr einfach und bequem. Select- und Checkboxen, welche individuell angepasst werden sollen, erhalten einfach eine bestimmte Klasse.
Durch diese bestimmte Klasse erkennt unser Script, dass diese Elemente bearbeitet werden sollen. In der Bearbeitung wird das Original-Element ausgeblendet und beispielweise (bei Selectboxen) durch ein <div> und einer Liste (<ul>) ersetzt. Alle Optiosfelder werden in die Liste geschrieben und via Mootools werden alle Funktionen hergestellt.
Ob Select- oder Checkbox: Das eigentliche Original-Element wird beibehalten und dient nach wie vor zur Übermittlung der Daten.
Internet Explorer 6 natürlich supported!
Was ist zu tun?
Zunächst benötigen wir Mootools und unsere inputEdit.js (alle Daten mit Demo gibt es am Ende dieses Artikels). Diese müssen wir wie gewohnt in unser HTML Dokument einbinden.
Danach müssen wir lediglich bestimmen, welche Elemente betroffen sein sollen. Und zwar so:
<label for="abc">Meine Selectbox</label> <select class="inputEdit_select" id="abc" name="xyz"> <option value="1">Wert 1</option> <option value="2">Wert 2</option> <option value="3">Wert 3</option> <option value="4">Wert 4</option> </select>
<label for="abc">Meine Checkbox</label> <input type="checkbox" class="inputEdit_checkbox" id="abc" name="xyz" />
Wichtig ist hierbei lediglich das class=“inputEdit_select“ (für Selectboxen) oder das class=“inputEdit_checkbox“ (für Checkboxen).
Dieses Script sucht auch automatisch zu den Elementen ggf. vorhandene Labels und stellt deren Funktion ebenfalls völlig automatisch her.
Die Integration ist damit komplett und es kann angefangen werden die Elemente via CSS anzupassen (Div- und Listen-Elemente).
Sollte es optische Unschönheiten in diversen Browsern geben, könnt ihr natürlich gerne auf folgenden Artikel zurückgreifen und damit die Probleme lösen: Browseroptimierung per CSS leicht gemacht
Download ohne Slide-Effekt
Hier findet ihr nochmals den kompletten Download aller Daten, darin:
- inputEdit.js
- Mootools
- Beispiel-CSS-Angaben
- Beispie-Bilder für das aussehen
- eine Demo-Datei
- keine OptGroup Unterstützung
- keine Markierung der Auswahl
Download mit Slide-Effekt
Und hier der komplette Download aller Daten mit Slide-Effekt (wie oben zu sehen):
- inputEdit.js mit Slide-Effekt
- Mootools
- Beispiel-CSS-Angaben
- Beispie-Bilder für das aussehen
- eine Demo-Datei
- mit OptGroup Unterstützung
- mit Markierung der aktuellen Auswahl
Vielen Dank und vor allem viel Spaß beim Anpassen!
