Firefox选择框 - 在保持箭头的同时删除灰色背景

Question

我在设计选择框时遇到了一个小问题。当我检查Chrome中的那些选择框时，每件事情似乎都没问题。但在Firefox中它并不整洁。我想要做的只是删除灰色背景，但我想保持箭头相同的方式。

我用过

select 
{
-moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
} 

但是在那段代码运行之后，选择框的箭头已经消失了。

希望有一个很好的解决方案。

Answer 1

当您尝试使用-moz-appearance删除背景色时，箭头图标也将消失。 另一种方法是，您可以在选择框中添加自己的箭头图标。

@-moz-document url-prefix()
{
    select
    {
        -moz-appearance: none;
        background: url("./../../images/your-icon.svg") no-repeat right center; 
    }
}

在上述代码段中用您自己的图标路径替换网址。

Answer 2

如果您只想删除背景颜色，请执行此操作。这是最简单的解决方案：https://jsfiddle.net/7dvLa413/1/

select {
  background-color: transparent;
  text-indent: 0.01px;
  text-overflow: '';
}

如果能够充分解决您的问题，或者还有更多问题，请告诉我。