当我设置自定义边框或背景颜色时，为什么 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/

希望对你有帮助。

Answer 2

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

这就是使用 SVG 的方法：

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;
}

我使用 scss 根据变量生成样式，所以我想使用$base-font-color 作为三角形的颜色。问题在于编码。

Chrome 可以处理简单的.. fill='"+ $base-font-color +"' .. in:

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>");

但 Firefox 需要 %23。这是一个问题，因为我将颜色存储在变量中：$base-font-color: #3e4f5e; 而不是$base-font-color: '3e4f5e'。解决方案是 convert color to string 并使用 string replacement 将 '#' 替换为 '%23'

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@function to-string($value) {
  @return inspect($value);
}

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='"+ str-replace(to-string($base-font-color), '#', '%23')  +"'><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;
}