带有黑色背景的 HTML 选择标签 - 下拉三角形在 Firefox 3 中不可见

StackOverflow https://stackoverflow.com/questions/29244

题

我有以下 HTML（注意 CSS 使背景变为黑色，文本变为白色）

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

Safari 足够智能，可以使文本右侧出现的小三角形与前景文本的颜色相同。

其他浏览器基本上会忽略CSS，所以它们也很好。

然而，Firefox 3 应用了背景颜色，但将三角形保留为黑色，因此您看不到它，如下所示

Example

我不知道如何解决这个问题 - 有人可以帮忙吗？有没有 -moz-select-triangle-color 或者类似的晦涩难懂的东西？

有帮助吗？

解决方案

必须是一个 Vista 问题。我有 XP SP 2 看起来很正常。

其他提示

上述修复的问题是它在 Safari 上不起作用 - 最终会显示白色背景，看起来很糟糕。我通过使用这个 Moz 特定的伪类来解决这个问题：

select:-moz-system-metric(windows-default-theme) {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

理论上，只有在精美的 Windows 主题生效时才应用此 CSS，请参阅此 https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)

按钮必须是黑色的吗？您可以将黑色背景应用于选项。

为了使黑色小箭头在 vista 上显示（黑色背景），我制作了一个白框 gif 并使用了以下 CSS：

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

我将该代码放入一个文件中并将其推送到 ff3，但我看不到您所看到的内容...箭头是带有灰色背景和黑色箭头的默认颜色。

你也在设计滚动条吗？

我已经更新了帖子，其中的 HTML 现在是字面上的 全部 正在加载的 html，没有其他 CSS/JS 或任何东西，它看起来仍然与图片中发布的一模一样。

注意我是vista。它可能在 XP 上做不同的事情，我没有检查过

一定是Vista的问题。我有 XP SP 2，看起来很正常。

确实如此。
我在XP上试过了，没问题，在主题设置为windows classic的vista上也没问题。一定是 firefox-vista-aero 主题中的一个错误。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top