CODEWITHSUNDEEP
htmlcssfirefoxdrop-down-menuhtml-select
Orion Edwards
Orion Edwards

Reputation: 123642

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

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?

Upvotes: 8

Views: 23481

Answers (6)

RedWolves
RedWolves

Reputation: 10385

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

Upvotes: 4

Rob
Rob

Reputation:

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)

Upvotes: 3

Ant
Ant

Reputation:

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

Upvotes: 2

Orion Edwards
Orion Edwards

Reputation: 123642

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.

Upvotes: 0

Orion Edwards
Orion Edwards

Reputation: 123642

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

Upvotes: 0

Re0sless
Re0sless

Reputation: 10886

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

Upvotes: 2

Related Questions