HTML-Auswahltag mit schwarzem Hintergrund – Dropdown-Dreieck ist in Firefox 3 unsichtbar
-
09-06-2019 - |
Frage
Ich habe den folgenden HTML-Code (beachten Sie, dass CSS den Hintergrund schwarz und den Text weiß macht)
<html>
<select id="opts" style="background-color: black; color: white;">
<option>first</option>
<option>second</option>
</select>
</html>
Safari ist intelligent genug, um dem kleinen Dreieck, das rechts neben dem Text erscheint, die gleiche Farbe wie den Vordergrundtext zu geben.
Andere Browser ignorieren grundsätzlich das CSS, also sind sie auch in Ordnung.
Firefox 3 wendet jedoch die Hintergrundfarbe an, lässt das Dreieck jedoch schwarz, sodass Sie es nicht sehen können, so wie hier
Ich kann nicht herausfinden, wie ich das beheben kann. Kann mir jemand helfen?Gibt es ein -moz-select-triangle-color
oder so etwas Unverständliches?
Lösung
Muss ein sein Vista
Problem.Ich habe XP SP 2
und es sieht normal aus.
Andere Tipps
Das Problem mit der oben genannten Lösung besteht darin, dass sie in Safari nicht funktioniert. Am Ende wird nur ein weißer Hintergrund angezeigt, der schlecht aussieht.Ich habe dies umgangen, indem ich diese Moz-spezifische Pseudoklasse verwendet habe:
select:-moz-system-metric(windows-default-theme) {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
Theoretisch gilt dieses CSS nur, wenn ein ausgefallenes Windows-Theme in Kraft ist, siehe hier https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)
Muss der Knopf schwarz sein?Sie könnten stattdessen den schwarzen Hintergrund auf die Optionen anwenden.
Damit der kleine schwarze Pfeil auf Vista angezeigt wird (mit schwarzem Hintergrund), habe ich ein White-Box-GIF erstellt und das folgende CSS verwendet:
select {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
Ich habe diesen Code in einer Datei abgelegt und auf ff3 verschoben, und ich sehe nicht, was Sie sehen ... der Pfeil hat die Standardfarbe mit grauem Hintergrund und schwarzem Pfeil.
Gestalten Sie auch Bildlaufleisten?
Ich habe den Beitrag aktualisiert, der HTML-Code darin ist jetzt im wahrsten Sinne des Wortes alle das HTML, das geladen wird, kein anderes CSS/JS oder ähnliches, und es sieht immer noch genauso aus, wie auf dem Bild gepostet.
Beachten Sie, dass ich auf Vista bin.Unter XP funktioniert es möglicherweise anders, ich habe es nicht überprüft
Muss ein Vista-Problem sein.Ich habe XP SP 2 und es sieht normal aus.
So ist es.
Ich habe es unter XP ausprobiert und es ist in Ordnung, und unter Vista mit dem auf Windows Classic eingestellten Design ist es auch in Ordnung.Muss einfach ein Fehler im Firefox-Vista-Aero-Theme sein.