当我设置自定义边框或背景颜色时,为什么Firefox在选择箭头按钮上设置背景颜色？

Question

在FF 37中,默认选择输入如下所示:

当我尝试给它一个不同的边框颜色,如下所示:

select { border: 1px solid silver; }

结果如下:

出于某种原因,当您为选择输入提供不同的边框时,它还会向箭头按钮添加背景和边框.

当我执行以下操作时会发生类似的事情:

select { background: transparent; }     

最终结果如下:

为什么会发生这种情况？如何更改选择输入的边框或背景而不更改向下箭头按钮？

jsfiddle与例子

Answer 1

首先,样式表单元素非常复杂和麻烦.最近取得了一些进展,但从浏览器到浏览器的行为不一致.问题来自浏览器历史上处理表单元素的方式(让操作系统决定元素外观).

现在回答你的问题:出于某种原因,每当你修改FF默认样式表时,浏览器会在下拉列表中应用不同的样式(这可能是一个错误,一个糟糕的实现或计划行为,但它显然很烦人).

一种解决方案是使用供应商属性完全摆脱所有"chrome" -x-appearance: none,如下所示:

select {
  border: 1px solid silver;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 25px;
  background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);
  background-repeat: no-repeat;
  background-position: 95% 42%;
}

请注意,您必须重新应用向下箭头(我通过将图像作为背景插入,以base64编码来完成此操作.)您可以使用您喜欢的任何图像.

这种方法的问题在于它在IE中不起作用:http://caniuse.com/#search=appearance

在这里你有一个小提琴来测试它:https://jsfiddle.net/81L844p4/4/

希望能帮助到你.