Die Idee, die dahinter steckt ist folgende: Mit JavaScript wird das zu verändernde <select>-Element angesprochen. Dies kann entweder mit einer Schleife erfolgen, welche das ganze Dokument durchsucht oder selbstverständlich auch explizit für einzelne Elemente. Die entsprechenden Elemente werden anschließend durch einen neuen HTML-Code ersetzt, der ungefähr so aussehen könnte:

<div class="style-me">
	<span class="show-text" id="show-text"></span>
	<img src="dropdown-arrow.gif" alt="" />
	<select>...</select>
</div>

Das ursprüngliche <select>-Element wird hierbei nicht weg geworfen, sondern per CSS mit position: absolute; bzw. position: relative; über das neue <div> gelegt und anschließend kann die Opazität auf 0 gesetzt werden.

Hier ein kleines Beispiel zur Verdeutlichung. Links das fertige Element. Rechts zur Demonstration mit einem halbdurchsichtigen <select>-Element.

Dadurch, dass die Selectbox noch existiert und oben liegt, kann der User ganz normal darauf klicken und in der Selectbox die gewünschte Option auswählen. Die Selectbox erhält dann den entsprechenden Wert, der beim Absenden des Formulars regulär mitgeschickt wird. Wir müssen lediglich mit einem onchange-Event den Text des gewählten Wertes auslesen und in unser neu erstelltes HTML-Element schreiben.

Wir können anschließend das neue <div>-Element beliebig mit CSS manipulieren, eine Hintergrundgrafik vergeben, die Schrift ändern. Außerdem habe ich im Beispiel-Code oben eine Grafik mit eingefügt. Diese kann beliebig gewählt werden, so dass die perfekte Illusion einer gestylten Selectbox entsteht.

Abhilfe gegen viele Probleme schafft das Open-Source-Projekt “ie7-js“. Durch einbinden einer JavaScript-Datei kann man entweder die Internet Explorer Versionen 5 und 6 kompatibel zu Version 7 machen oder gar die Versionen 5 bis 7 kompatibel zu Version 8. Welche Bugs behoben oder welche Features genau dazu kommen, zeigt diese Übersicht.

Nach ersten Tests bin ich ziemlich zuversichtlich, dass mir dieses Projekt in Zukunft die Arbeit erleichtern wird. Ich habe bis jetzt zwar erst die PNG-Funktionalität getestet, aber PNG-Files mit Alpha-Transparenzen im IE6 sehen zu können, hat mich schon begeistert.
Das Tool hat zwar Probleme, mit Hintergrund-Grafiken und background-repeat, aber wenn man es weiß, kann man solche Fälle umgehen und ggf. anders lösen.

Wer mehr wissen und ggf. selber testen und einsetzen will, findet alles was er braucht auf der ie7-js Projekt-Seite von Google Code.