黑色背景的HTML Select标签-在Firefox 3中不显示下拉三角形
时间：2020-03-05 18:43:35 来源:igfitidea点击:
我有以下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"或者类似的模糊内容？
解决方案
回答
按钮是否需要为黑色？我们可以改为将黑色背景应用于选项。
回答
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?
我已经更新了帖子，其中的HTML现在实际上是所有正在加载的html，没有其他CSS / JS或者其他任何内容，并且看起来仍然与图片中的完全相同。
请注意我在远景。它在XP上可能做不同的事情，我没有检查
回答
必须是" Vista"问题。我有XP SP 2，看起来很正常。
回答
Must be a Vista problem. I have XP SP 2 and it looks normal.
就是这样
我在XP上尝试过它，还不错，在将主题设置为Windows Classic的Vista上也很好。只能是firefox-vista-aero主题中的错误。
回答
为了使小的黑色箭头在Vista(具有黑色背景)上显示，我制作了白框gif，并使用了以下CSS：
select {
background-image: url(../images/selectBox.gif);
background-position: right;
background-repeat: no-repeat;
}
回答
上面的修复程序存在问题，因为它在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)
