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

Posted 2021-03-30

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

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

select { border: 1px solid silver; }

结果如下：

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

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

select { background: transparent; }     

最终结果如下：

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

jsfiddle with example

答案

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

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

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

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/

希望能帮助到你。

另一答案

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 +"' ..：

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