Geek Answers Handbook

HTML Select Tag with a black background - a drop-down triangle is invisible in Firefox 3

I have the following HTML (note that CSS makes black background 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 that the little triangle to the right of the text has the same color as the foreground text.

Other browsers mostly ignore CSS, so they are great too.

However, Firefox 3 applies the background color, but leaves the triangle black, so you cannot see it, for example

Example

I can't figure out how to fix this - can anyone help? Is there -moz-select-triangle-color or something implicit?

+6
html css firefox drop-down-menu html-select
source share
6 answers

There must be a Vista problem. I have XP SP 2 and it looks fine.

+3
source share

Should the button be black? You can apply a black background to the parameters.

+3
source share

The problem with the fix above is that it doesn’t work on Safari - you end up with a white background that looks bad. I got around this using this particular class 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 to this CSS if a real Windows theme comes into play, see this https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)

+3
source share

To make the small black arrow appear on the screen (with a black background), I made a white gif file and used the following CSS:

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

I dropped this code into a file and pressed it on ff3 and I don’t see what you see ... the default arrow is a color with a gray background and a black arrow.

Are you also scrolling scrollbars?

I updated the post, HTML now has literally all the downloadable html, no other CSS / JS or anything else, and it still looks exactly like the one shown in the pic.

Note. I am in vista. It can do different things on XP, I have not tested

0
source share

There must be a problem with Vista. I have XP SP 2 and it looks fine.

The way it is. I tried this on XP, and it’s fine, and on Vista with the theme installed for Windows classic, it’s fine too. It should just be a bug in the firefox-vista-aero theme.

0
source share

More articles:


All Articles