Auswahlfeld farbig
ich will in einem Formular das Auswahlfeld optisch mit Farben darstellen. Diese Farben ergänzen quasi den Inhalt des jeweiligen Elements.
Die Farben werden soweit auch angezeigt, allerdings beim Auswählen mit der Maus (:hover) wird die Hintergrundfarbe dann Blau angezeigt und mir ist nicht bekannt, wie ich das verhindern bzw. ändern kann.
Der hier verwendete Code
<style>
select{
width:200px;
}
select > option[value="0"] {
background: white;
color: black;
}
select > option[value="1"] {
background: green;
color: white;
}
select > option[value="2"] {
background: orange;
color: black;
}
select > option[value="3"] {
background: red;
color: black;
}
select > option[value="4"] {
background: black;
color: white;
}
select>option:hover{
background: yellow;
cursor: pointer;
}
select option[checked]:hover:before,
select option[selected]:checked:hover:before
{
content:attr(data-text);
width:180px;
padding-bottom:2px;
position:absolute;
z-index:1;
color:red;
background:yellow;
}
</style>
<select onfocus='this.size=5;' onblur='this.size=0;'>
<option value="0">Inaktiv</option>
<option value="1">Stufe 1</option>
<option value="2">Stufe 2</option>
<option value="3" selected="" data-text='Stufe 3'>Stufe 3</option>
<option value="4">Stufe 4</option>
</select>