Background-color in select FF und Opera

[mikdoe]

Guten Abend!

Habe hier diese Select-Box:

<select onchange="...." style="font-size: smaller; cursor: pointer;">
<option style="background-color: #FF8080;" value="500"> Umgehend </option>
<option style="background-color: #FFC080;" value="400" selected> Dringend </option>
<option style="background-color: #FEFF80;" value="300"> Wichtig </option>
<option style="background-color: #BEFF80;" value="200"> Beizeiten </option>
<option style="background-color: #80FF80;" value="100"> Nachrangig </option>
</select>

Im IE 8 ist die selected Auswahl auch farbig hinterlegt.
Im Opera und FF nicht.
Weiß jemand, wie man das bewerkstelligen kann, dass auch die selected Auswahl farbig unterlegt ist?

Danke

 

[miniA4kuser]

Mit reinem CSS denke ich mal ist das nicht machbar, kann mich aber auch irren, denn wie auch bei Selfhtml beschrieben (Selfhtml...background-color (Hintergrundfarbe)) kannst du mit der Angabe background-color eine eigene Hintergrundfarbe für ein HTML-Element definiert werden. In deinem Beispiel setzt du die Hintergrundfarbe separat für jedes <option>-Element, welches ein Unterelement des <select>-Elements ist. Daraus folgt, dass der Wert des ausgewählten <option>-Elements z.B. "Umgehend" in das <select>-Element "kopiert" wird sobald die Select-Liste geschlossen wird, denn der Benutzer sieht ja nur das <select>-Element. Dieses hat jedoch kein background-color definiert. Der IE kopiert diese Eigenschaft zwar mit, aber man kann sich jetzt Streiten ob das der HTML/CSS-Spezifikation entspricht oder nicht.
Die Lösung welche ich sehe ist dieses Stück JavaScript im onchange des <select>-Elements:

<select style="font-size: smaller; cursor: pointer;"
	onChange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
	<option style="background-color: #FF8080;" value="500"> Umgehend </option>
	<option style="background-color: #FFC080;" value="400" selected> Dringend </option>
	<option style="background-color: #FEFF80;" value="300"> Wichtig </option>
	<option style="background-color: #BEFF80;" value="200"> Beizeiten </option>
	<option style="background-color: #80FF80;" value="100"> Nachrangig </option>
</select>

 

[mikdoe]

Das war ein guter Tipp! Danke Dir.
Hab zwar nicht das JS verwendet, weil der onchange ohnehin einen Reload der Seite auslöst aber die Vorbelegung des select mit der Farbe hat geholfen.

Danke

 

[miniA4kuser]

Gern geschehen.