HTML-Auswahltag mit schwarzem Hintergrund – Dropdown-Dreieck ist in Firefox 3 unsichtbar

StackOverflow https://stackoverflow.com/questions/29244

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

Example

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?

War es hilfreich?

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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top