黑色背景的 HTML 选择标签 - 下拉三角形在 Firefox 3 中不可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Select Tag with black background - dropdown triangle is invisible in Firefox 3
提问by Orion Edwards
I have the following HTML (note the CSS making the background black and text white)
我有以下 HTML（注意使背景为黑色和文本为白色的 CSS）
<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.
Safari 非常聪明，可以使文本右侧的小三角形与前景文本的颜色相同。
Other browsers basically ignore the CSS, so they're fine too.
其他浏览器基本上忽略了 CSS，所以它们也很好。
Firefox 3 however applies the background color but leaves the triangle black, so you can't see it, like this
然而，Firefox 3 应用了背景颜色但将三角形保留为黑色，因此您看不到它，就像这样
I can't find out how to fix this - can anyone help? Is there a -moz-select-triangle-coloror something obscure like that?
我不知道如何解决这个问题 - 任何人都可以帮忙吗？有没有-moz-select-triangle-color类似的东西？
采纳答案by RedWolves
Must be a Vistaproblem. I have XP SP 2and it looks normal.
一定是有Vista问题。我有XP SP 2，看起来很正常。
回答by RedWolves
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:
上面修复的问题是它在 Safari 上不起作用 - 你最终会显示白色背景，看起来很糟糕。我通过使用这个 Moz 特定的伪类来解决这个问题：
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)
从理论上讲，这仅在花哨的 Windows 主题生效时才应用此 CSS，请参阅此https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)
回答by RedWolves
To make the little black arrow show on vista (with a black background), I made a white box gif and used the following CSS:
为了在 vista 上显示小黑箭头（黑色背景），我制作了一个白框 gif 并使用了以下 CSS：
select {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
回答by Re0sless
Does the button need to be black? you could apply the black background to the options instead.
按钮需要是黑色的吗？您可以将黑色背景应用于选项。
回答by Orion Edwards
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?
我将该代码放入一个文件中并将其推送到 ff3，但我没有看到您看到的内容...箭头是带有灰色背景和黑色箭头的默认颜色。
你也在设计滚动条吗？
I've updated the post, the HTML in there is now literally allthe html that is being loaded, no other CSS/JS or anything, and it still looks exactly as posted in the pic.
我已经更新了帖子，里面的 HTML 现在实际上是所有正在加载的 html，没有其他 CSS/JS 或任何东西，它看起来仍然与图片中发布的完全一样。
Note I'm on vista. It may do different things on XP, I haven't checked
注意我在vista上。它可能在 XP 上做不同的事情，我没有检查过
回答by Orion Edwards
Must be a Vista problem. I have XP SP 2 and it looks normal.
一定是Vista的问题。我有 XP SP 2，它看起来很正常。
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.
确实如此。
我在 XP 上试过了，很好，在 vista 上，主题设置为 windows 经典也很好。一定只是 firefox-vista-aero 主题中的一个错误。
