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

Question

FF 37 中的默认 select 输入如下所示：

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

select { border: 1px solid silver; }

结果是这样的：

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

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

select { background: transparent; }

结果是这样的：

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

jsfiddle with example

Answer 1

首先，样式化表单元素非常复杂和麻烦。最近取得了一些进展，但浏览器之间的行为不一致。问题来自于浏览器历来处理表单元素的方式（让 OS 决定元素的外观）。

现在回答您的问题：出于某种原因，每当您修改 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 and use 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;
}

Answer 3

要解决这个问题，只需设置一个边框。

select {
     border:1px solid black;
    }

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

Why does Firefox set a background color on the select arrow button when I set a custom border or background color?

css

firefox