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

Answer 1

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

Answer 2

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?

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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;
}

Answer 7

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)