選擇與火狐CSS內聯svg背景

我正在建立一個自定義選擇標籤與內聯svg背景使用-webkit外觀：無我的CSS。選擇與火狐CSS內聯svg背景

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外觀：在Firefox中沒有讓它起作用？

預先感謝您

來源

2013-05-21 Sucrenoir

-moz-外觀：無應做...將考驗。 – bwoebi

...但它已經在我的firefox（=在webkit相同的結果）沒有-moz外觀？ – bwoebi

它不能在Firefox 22中工作。我仍然在svg箭頭前面的firefox箭頭。 http://jsfiddle.net/sucrenoir/yHR53/7/ – Sucrenoir

應該使用-moz-appearance: none;用於Firefox的工作。

來源

2013-05-21 09:22:03 Nitesh

糟糕。 @bwoebi已經回答了幾分鐘。 – Nitesh

不幸的是，現在的答案是否定的。

根據MDN doc，現在不推薦使用它，因爲它是越野車。

來源

2013-05-21 09:29:08 shinnyx

是的。也許我應該嘗試另一種解決方案...我發現了另一種解決方案：http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox – Sucrenoir

With文本縮進，我在兩個瀏覽器上都可以通過。 http://jsfiddle.net/sucrenoir/yHR53/11/ Thx :-) – Sucrenoir

另一種方法是使用：

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

來源

2014-02-04 19:40:47 pinder

選擇與火狐CSS內聯svg背景

回答

相關問題