Wie kann ich in html die Farbe einzelner Einträge (<option> Tag) in einem select-Auswahlfeld verändern? Ich habe schon lange herumprobiert und die Suchmaschine bemüht, aber alle Styling-Angaben im <option> Tag ob klassich oder mit CSS werden ignoriert. Wie auf dem Screenshot zu sehen, habe ich mir erst mal mit eckigen Klammern beholfen, aber die sind sehr schlecht zu erkennen. Das ganze läuft lokal auf meinem Rechner, es soll und muss nur beim Firefox funktionieren. Gerne auch Javascript, aber da bräuchte ich ein funktionierendes Beispielscript, wo ich mich weiter hangeln kann, da ich mich damit so gut wie nicht auskenne.
Angehängte Dateien:
-
screenshot.png
28 KB
1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8" /> |
5 | <title>Title</title> |
6 | <style type="text/css"><!-- |
7 | option.C { |
8 | background-color: #B11010; |
9 | }
|
10 | --></style> |
11 | </head>
|
12 | <body>
|
13 | <select name="selector" size="5"> |
14 | <option value="1" label="A..........A"></option> |
15 | <option value="2" label="B..........B"></option> |
16 | <option class="C" value="3" label="C..........C"></option> |
17 | </select>
|
18 | </body>
|
19 | </html>
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#styling_with_css Momentan am einfachsten: Ersetz das ganze option-Element durch CSS und Javascript. Entweder mit einem der tausenden Javascript-Frameworks, oder mit einer Handvoll Zeilen "VanillaJS".
Εrnst B. schrieb: > https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#styling_with_css > > Momentan am einfachsten: > Ersetz das ganze option-Element durch CSS und Javascript. > > Entweder mit einem der tausenden Javascript-Frameworks, oder mit einer > Handvoll Zeilen "VanillaJS". Klasse, dein Beispiel funktioniert, das sollte ich wohl adaptieren können.
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.