Balise de sélection HTML avec fond noir - le triangle déroulant est invisible dans Firefox 3

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

Question

J'ai le code HTML suivant (notez le CSS qui rend l'arrière-plan noir et le texte blanc)

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

Safari est suffisamment intelligent pour donner au petit triangle qui apparaît à droite du texte la même couleur que le texte de premier plan.

Les autres navigateurs ignorent fondamentalement le CSS, ils conviennent donc également.

Firefox 3 applique cependant la couleur de fond mais laisse le triangle noir, donc vous ne pouvez pas le voir, comme ceci

Example

Je n'arrive pas à trouver comment résoudre ce problème. Quelqu'un peut-il m'aider ?Y a-t-il un -moz-select-triangle-color ou quelque chose d'obscur comme ça ?

Était-ce utile?

La solution

Doit être un Vista problème.J'ai XP SP 2 et ça a l'air normal.

Autres conseils

Le problème avec le correctif ci-dessus est qu'il ne fonctionne pas sur Safari - vous vous retrouvez avec un arrière-plan blanc qui semble mauvais.J'ai contourné ce problème en utilisant cette pseudo-classe spécifique à Moz :

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

En théorie, cela n'applique ce CSS que si un thème Windows sophistiqué est en vigueur, voir ceci https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)

Le bouton doit-il être noir ?vous pouvez plutôt appliquer le fond noir aux options.

Pour faire apparaître la petite flèche noire sur Vista (avec un fond noir), j'ai réalisé un gif encadré blanc et utilisé le CSS suivant :

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

J'ai déposé ce code dans un fichier et je l'ai poussé vers ff3 et je ne vois pas ce que vous voyez... la flèche est de couleur par défaut avec un fond gris et une flèche noire.

Est-ce que vous stylisez également les barres de défilement ?

J'ai mis à jour le message, le HTML qu'il contient est maintenant littéralement tous le HTML qui est en cours de chargement, pas d'autre CSS/JS ou quoi que ce soit, et il ressemble toujours exactement à celui publié sur la photo.

Attention, je suis sous Vista.Cela peut faire des choses différentes sous XP, je n'ai pas vérifié

Ça doit être un problème avec Vista.J'ai XP SP 2 et ça a l'air normal.

Donc c'est.
Je l'ai essayé sur XP et ça va, et sur Vista avec le thème défini sur Windows Classic, ça va aussi.Ce doit être juste un bug dans le thème Firefox-Vista-Aero.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top