CSS-Style für Select-Boxen
/ Autor: Albrecht, 23 Jan 2009Das HTML-Element <select> lässt sich kaum optisch anpassen. Primitivste Änderungen, wie z.B. die Breite oder der Border sind hier schon beinahe das höchste der Gefühle. Wenn man aber den Anspruch hat, wirklich optisch ansprechende Webauftritte zu erstellen, kann das nicht zufrieden stellen. Abhilfe schafft hier eine Lösung mit JavaScript.
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.
16 Dez 2009
Sieht ja super aus! Aber wie funktioniert das mit dem onchange, damit ich die ausgewählte option auch sehe?
thx FF
21 Dez 2009
Hi Albrecht,
die Methode ist gut – einfach und elegant. Allerdings muss ich darauf hinweisen dass sie nicht im IE 6 funktioniert. Und solange unsereins den auf Corporate Ebene noch unterstützen muss kann man die so leider nicht verwenden. Vielleicht klappts ja 2010
Grüsse aus Hamburg
08 Jan 2010
[...] [...]
17 Feb 2010
Sieht super aus, funktioniert sogar bei IE 6!
Nice!
23 Feb 2010
Klappt echt gut, nur leider bekomm ich auch das OnChange nicht hin, kannst das in dein Beispiel einbauen?
25 Feb 2010
Hallo Kai,
wo genau liegt dein Problem? Aussehen könnte das in etwa so:
<select name=”foo” onchange=”updateText(this);”>…</select>
Und hier dazu die JavaScript-Funktion:
function updateText(selectbox) {
document.getElementById(‘fakebox’).innerHTML = selectbox.value;
}
05 Apr 2010
Die Lösung ist zwar echt simpel aber gut, ein Problem (was sich meinem Kenntnisstand nach nicht beheben lässt) hat sie allerdings: Die Bevel-Border des Option-Elements, welche nicht änderbar ist…. :-/
Ich denke ich werde das auf meiner Seite so machen dass ich nen js die options auslesen lasse, ne Liste erstelle die dann an dem “head-div” positioniert wird.. und dann jedes Element der Liste mit nem OnKlick-Event versehen oder hat jemand bessere Vorschläge zur Hand?
28 Apr 2010
[...] Dieser Eintrag wurde auf Twitter von onion_papa erwähnt. onion_papa sagte: http://tinyurl.com/y3m7tfz CSS-Style für Select-Boxen | zeroseven labs [...]