css - 使用 Firefox 选择 CSS 内联 svg 背景

Question

我正在使用我的 css 中的 -webkit-appearance: none 构建一个带有内联 svg 背景的自定义选择标签。

http://jsfiddle.net/sucrenoir/yHR53/5/

select {
    font-size: 30px;
    border: 1px solid lightblue;
    border-radius: 10px;
    color: black;
    padding: 12px;
    width: 300px;
    -webkit-appearance: none;

    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;

    background-color: lightblue;
    background-transparency: 0.5;
    background-position: right 15px top 22px;
    background-size: 18px 18px;
}

它在 Firefox 中不起作用（显然）。

什么是 -webkit-appearance: none 在 Firefox 中的等价物让它工作？

先感谢您

Answer 1

Unfortunately the answer is no at the moment.

According to MDN doc, it's not recommended to use it now as it's buggy.

Answer 2

应该-moz-appearance: none;用于 Firefox 工作。

Answer 3

另一种方法是使用：

@-moz-document url-prefix() {
    select {
        background: lightblue; 
    }
}