<p>I have the following HTML (note the CSS making the background black and text white)</p>

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

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

<p>Other browsers basically ignore the CSS, so they're fine too.</p>

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

<p><img src="https://i.stack.imgur.com/Mvc7a.jpg" alt="Example"></p>

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

[{'answer_id': 29245, 'author': 'Re0sless', 'author_id': 2098, 'author_profile': 'https://Stackoverflow.com/users/2098', 'pm_score': 2, 'selected': False, 'text': '<p>Does the button need to be black? you could apply the black background to the options instead.</p>\n'}, {'answer_id': 29365, 'author': 'Orion Edwards', 'author_id': 234, 'author_profile': 'https://Stackoverflow.com/users/234', 'pm_score': 0, 'selected': False, 'text': "<blockquote>\n<p>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.</p>\n<p>Are you styling scrollbars too?</p>\n</blockquote>\n<p>I've updated the post, the HTML in there is now literally <em>all</em> the html that is being loaded, no other CSS/JS or anything, and it still looks exactly as posted in the pic.</p>\n<p>Note I'm on vista. It may do different things on XP, I haven't checked</p>\n"}, {'answer_id': 29439, 'author': 'RedWolves', 'author_id': 648, 'author_profile': 'https://Stackoverflow.com/users/648', 'pm_score': 3, 'selected': True, 'text': '<p>Must be a <code>Vista</code> problem.  I have <code>XP SP 2</code> and it looks normal.  </p>\n'}, {'answer_id': 31400, 'author': 'Orion Edwards', 'author_id': 234, 'author_profile': 'https://Stackoverflow.com/users/234', 'pm_score': 0, 'selected': False, 'text': "<blockquote>\n  <p>Must be a Vista problem. I have XP SP 2 and it looks normal. </p>\n</blockquote>\n\n<p>So it is.<br>\nI 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.</p>\n"}, {'answer_id': 365359, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>To make the little black arrow show on vista (with a black background), I made a white box gif and used the following CSS:</p>\n\n<pre class="lang-css prettyprint-override"><code>select {\n    background-image: url(../images/selectBox.gif);\n    background-position: right;\n    background-repeat: no-repeat;\n}\n</code></pre>\n'}, {'answer_id': 650183, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>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:</p>\n\n<pre class="lang-css prettyprint-override"><code>select:-moz-system-metric(windows-default-theme) {\n    background-image: url(../images/selectBox.gif);\n    background-position: right;\n    background-repeat: no-repeat;\n}\n</code></pre>\n\n<p>In theory this only applies this CSS if a fancy Windows theme is in effect, see this <a href="https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)" rel="nofollow noreferrer">https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)</a></p>\n'}]
['https://Stackoverflow.com/questions/29244', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/234/']