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

Question

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

当我尝试给它一个不同的边框颜色时：

select { border: 1px solid silver; }

结果如下：

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

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

select { background: transparent; }     

它最终是这样的：

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

jsfiddle with example

Answer 1

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

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

一种解决方案是摆脱所有＆＃34; chrome＆＃34;总而言之，使用供应商属性-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/

希望它有所帮助。

Answer 2

Damian给出的答案并不错，但我更喜欢更易于维护的东西。基本上，我还需要有可能准备一种风格，我可以根据主题改变颜色，因此png图像（在base64中）不是一个好的选择。

这是如何使用SVG完成的：

let elem = <HTMLElement> document.querySelector('my-page');

我使用scss根据变量生成样式，所以我想使用select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* SVG background image */ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23FF0000'><polygon points='20,0 80,0 50,52'/></svg>"); background-size: 12px; background-position-x: right; background-position-y: calc(100% - 10px); background-repeat: no-repeat; } 作为三角形的颜色。问题是编码。

Chrome可以处理简单的$base-font-color：

.. fill='"+ $base-font-color +"' ..

但是firefox需要background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='"+ $base-font-color +"'><polygon points='20,0 80,0 50,52'/></svg>"); 。这是一个问题，因为我将变量中的颜色存储为：%23而不是$base-font-color: #3e4f5e;。解决方案是convert color to string并使用string replacement将'＃'替换为'％23'

$base-font-color: '3e4f5e'