Question

我有以下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或类似的模糊内容？

Answer 1

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

Answer 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)

Answer 3

按钮是否需要为黑色？您可以将黑色背景应用于选项。

Answer 4

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

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

Answer 5

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

你也在设计滚动条样式吗？

我已更新帖子，其中的HTML现在字面上所有正在加载的html，没有其他CSS / JS或任何东西，它仍然看起来完全像在pic中发布

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

Answer 6

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

就是这样我在XP上尝试过它很好，并且在主题设置为windows classic的vista上它也很好。必须只是firefox-vista-aero主题中的一个错误。

HTML选择标记为黑色背景 - 下拉三角形在Firefox 3中不可见

6 个答案: