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

在上面的代码片段中将 url 替换为您自己的图标路径。