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

Question

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

当我尝试像这样给它一个不同的边框颜色时:

select { border: 1px solid silver; }

结果是这样的:

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

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

select { background: transparent; }     

结果是这样的:

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

jsfiddle with example

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

这里你有一个 fiddle 来测试它:https://jsfiddle.net/81L844p4/4/

希望对您有所帮助。