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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!