带有黑色背景的 HTML 选择标签 - 下拉三角形在 Firefox 3 中不可见
-
09-06-2019 - |
题
我有以下 HTML(注意 CSS 使背景变为黑色,文本变为白色)
<html>
<select id="opts" style="background-color: black; color: white;">
<option>first</option>
<option>second</option>
</select>
</html>
Safari 足够智能,可以使文本右侧出现的小三角形与前景文本的颜色相同。
其他浏览器基本上会忽略CSS,所以它们也很好。
然而,Firefox 3 应用了背景颜色,但将三角形保留为黑色,因此您看不到它,如下所示
我不知道如何解决这个问题 - 有人可以帮忙吗?有没有 -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 主题中的一个错误。