HTML Select Tag with black background - dropdown triangle is invisible in Firefox 3

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

Question

I have the following HTML (note the CSS making the background black and text white)

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

Safari is smart enough to make the small triangle that appears to the right of the text the same color as the foreground text.

Other browsers basically ignore the CSS, so they're fine too.

Firefox 3 however applies the background color but leaves the triangle black, so you can't see it, like this

Example

I can't find out how to fix this - can anyone help? Is there a -moz-select-triangle-color or something obscure like that?

Was it helpful?

Solution

Must be a Vista problem. I have XP SP 2 and it looks normal.

OTHER TIPS

Problem with the fix above is it doesn't work on Safari - you end up with the white background showing up which looks bad. I got round this by using this Moz specific pseudo-class:

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

In theory this only applies this CSS if a fancy Windows theme is in effect, see this https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)

Does the button need to be black? you could apply the black background to the options instead.

To make the little black arrow show on vista (with a black background), I made a white box gif and used the following CSS:

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

I dropped that code into a file and pushed it to ff3 and I don't see what you see...the arrow is default color with gray background and black arrow.

Are you styling scrollbars too?

I've updated the post, the HTML in there is now literally all the html that is being loaded, no other CSS/JS or anything, and it still looks exactly as posted in the pic.

Note I'm on vista. It may do different things on XP, I haven't checked

Must be a Vista problem. I have XP SP 2 and it looks normal.

So it is.
I tried it on XP and it's fine, and on vista with the theme set to windows classic it's also fine. Must just be a bug in the firefox-vista-aero theme.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top