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

22,755

Solution 1

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

Solution 2

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

Share:
22,755
Mitkins
Author by

Mitkins

I do .NET, C++, Ruby, Automated Testing, Running and Snowboarding@borland

Updated on February 24, 2020

Comments

  • Mitkins
    Mitkins about 4 years

    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?

  • Carlos Pinto
    Carlos Pinto over 12 years
    It is also a problem in Mac OSX Firefox 3