HTML <select> mit hintergrund-Farbe <option> - tags mit Chrom
Ich versuche, um eine Dropdown-Liste, die es einem Benutzer ermöglicht, wählen Sie aus einer Liste von Farben. Ich möchte die Hintergrundfarbe der einzelnen <option>
Element die Farbe, die der Benutzer wählen kann. Als proof-of-concept, habe ich dieses kleine html-Seite:
<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
.white {background-color:white;}
.red {background-color:red;}
.yellow {background-color:yellow;}
.green {background-color:green;}
</style>
</head>
<body>
<h2>Choose Color</h2>
<select>
<option class="white">This should have a WHITE background</option>
<option class="red">This should have a RED background</option>
<option class="yellow">This should have a YELLOW background</option>
<option class="green">This should have a GREEN background</option>
</select>
</body>
</html>
Wenn ich diese auf Firefox, entweder auf einem PC oder einem Mac, es sieht toll aus. Jedoch testen in Chrome auf einem Mac, ist es nicht zeigen, diese Farben im hintergrund. Hier ist ein screen shot von der Seite nach dem Rendern in Chrom und ich auf die select
Objekt:
Können Sie sehen, die Liste ist nur im standard-format mit grauem hintergrund. Sie können auch sehen, dass die Elemente, die verbunden sind mit der richtigen Klasse.
Ich bin mir bewusst, dass es ein paar Beiträge auf diese Frage, die ist wo ich meinen ersten code aus. Jedoch, keiner der Beiträge, die ich gelesen habe zu diesem Thema sind für mich arbeiten.
Was mache ich falsch? Danke!
Konnte nicht den Punkt in jeder option Farbe sichtbar sein sollten, habe ich Recht?
exakt der post, den ich verlinkt. Ich habe versucht, aber es ist nicht für mich arbeiten.
dein code funktioniert Prima. jsfiddle.net/zacvybc5
Ja, das ist der Punkt. Ich will es schauen ein wenig wie ein Regenbogen. Jede Zeile in der Dropdown-hat seine eigene Hintergrundfarbe basierend auf der Klasse, zu der es zugeordnet ist.
InformationsquelleAutor Alex | 2016-03-26
Du musst angemeldet sein, um einen Kommentar abzugeben.
Styling-option hat einige problem auf anderen OS. Sie sind nicht erlaubt, jede plugin wie bootstrap-select? Da das element li wird das sicher erreichen, was Sie wollen
Fügen Sie einfach das Skript von oben und was Sie erreichen wollen, ist auf Ihre docs silviomoreto.github.io/bootstrap-select/examples/...
Ja, ich fand es heraus. Allerdings habe ich immer NOCH das gleiche Problem - es funktioniert in Firefox aber nicht in Chrome.
Meinst du es ist nicht wroking auf chrome auch durch die Verwendung von bootstrap-select-plugin? Das ist seltsam, weil es funktioniert auf mein Ende. Chrom mit Mac OS.
Ja, das ist es, was ich meine. Would you mind posting deinen code, insbesondere die header-links? Das könnte sein, mein Problem. Ich habe den genauen code von Silvio Moreto ' s Website, aber noch keine Liebe. Nochmals vielen Dank.
InformationsquelleAutor Christian Esperar
In dem link, den Sie, die Antwort gegeben wurde mithilfe von JavaScript-und eine CSS-manipulation, das ist in Ordnung, auf mein Ende:
Außerdem habe ich noch die
color
Eigenschaft in ein paar Klassen zu zeigen, die Sie manipulieren können, mehr als nur die Hintergrundfarbe.Getestet habe ich es auf Chrome, FF und IE, aber ich bin mit Windows.
das ist beeindruckend - habe ich nicht gesehen. Ist es ausschließlich HTML 5? - Ich bin stecken mit 4...
es gibt Beiträge auf diese Weise gehen den ganzen Weg zurück bis 2004, so ist es sollte in der Lage sein zu tun pre-HTML5. Probieren Sie es aus (nur nicht bei Chrome für Mac!).
danke, ja, ich habe es ausprobiert - Bizarr das mir passiert ist, für all die Jahre, war ich immer gesagt, option-Elemente waren nicht Stil-in der Lage.
InformationsquelleAutor faino