Tag di selezione HTML con sfondo nero: il triangolo a discesa è invisibile in Firefox 3

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

Domanda

Ho il seguente HTML (nota il CSS che rende lo sfondo nero e il testo bianco)

<html>
  <select id="opts" style="background-color: black; color: white;">
    <option>first</option>
    <option>second</option>
  </select> 
</html>

Safari è abbastanza intelligente da rendere il piccolo triangolo che appare a destra del testo dello stesso colore del testo in primo piano.

Altri browser sostanzialmente ignorano i CSS, quindi vanno bene anche loro.

Firefox 3 invece applica il colore di sfondo ma lascia il triangolo nero, quindi non puoi vederlo, così

Example

Non riesco a capire come risolvere il problema: qualcuno può aiutarmi?C'è un -moz-select-triangle-color o qualcosa di oscuro del genere?

È stato utile?

Soluzione

Deve essere un Vista problema.Io ho XP SP 2 e sembra normale.

Altri suggerimenti

Il problema con la soluzione di cui sopra è che non funziona su Safari: alla fine viene visualizzato lo sfondo bianco che sembra brutto.Ho risolto il problema utilizzando questa pseudo-classe specifica di Moz:

select:-moz-system-metric(windows-default-theme) {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

In teoria questo si applica a questo CSS solo se è attivo un tema Windows elaborato, vedi questo https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(tema-default-windows)

Il pulsante deve essere nero?potresti invece applicare lo sfondo nero alle opzioni.

Per far sì che la piccola freccia nera venga visualizzata su Vista (con uno sfondo nero), ho creato una gif con riquadro bianco e ho utilizzato il seguente CSS:

select {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

Ho inserito il codice in un file e l'ho inserito in ff3 e non vedo quello che vedi tu... la freccia è di colore predefinito con sfondo grigio e freccia nera.

Stai anche dando uno stile alle barre di scorrimento?

Ho aggiornato il post, l'HTML in esso ora è letteralmente Tutto l'html che viene caricato, nessun altro CSS/JS o altro, e sembra ancora esattamente come pubblicato nella foto.

Nota che sono su Vista.Potrebbe fare cose diverse su XP, non ho controllato

Deve essere un problema di Vista.Ho XP SP 2 e sembra normale.

Così è.
L'ho provato su XP e va bene, e anche su Vista con il tema impostato su Windows Classic va bene.Deve essere solo un bug nel tema firefox-vista-aero.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top