瀏覽器（Webkit，IE，Firefox）更改背景的選擇

我一直在試圖擺脫網站中的默認漸變背景。我知道如果我設置了-webkit-appereance：沒有這個可能，但是我會在我想要的下拉列表中丟失箭頭和其他行爲。無論如何用-webkit-appearance：menulist設置背景爲白色？瀏覽器（Webkit，IE，Firefox）更改背景的選擇

這是我有，但背景不會改變

.ius select{ 
    -webkit-appearance: menulist; 
    -moz-appearance: menulist; 
    appearance: menulist; 
    height:32px; 
    border:1px solid #c8c8c8; 
    width:250px; 
    background:rgba(255, 255, 255, 0); 
    background: transparent; 
}

來源

2013-08-03 Faz Ya

你有個例子嗎？我不確定我瞭解你的問題。 – putvande

我不認爲有可能取代只是背景而不擺脫選擇的其他功能。你可以隨時使用像msDropDown這樣的jQuery插件來選擇你想要的樣式。 – eclipsis

外觀屬性一般用於兩個方面：

模仿等元素
或拆除的原生樣式所有原生造型（設定外觀爲無）

這是一個非常奇怪的屬性。

由於您要刪除原生默認背景，因此您需要將外觀設置爲無。這將刪除所有樣式（漸變和默認箭頭圖標）。然而，這並不是什麼大問題，因爲你可以使用CSS來將更多的樣式應用於它。

隨着標記：

<select id="menulist"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select>

和CSS：

#menulist { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height:20px; 
    border:1px solid rgb(156,156,156); 
    width:250px; 
    text-indent: 8px; 
    /** 
    * replace this background url with a proper arrow asset 
    **/ 
    background: url('http://placehold.it/5x10') no-repeat 95% 50%; 
}

完整的jsfiddle可以在這裏找到：http://jsfiddle.net/gwwar/vR53Q/2/

由於此屬性僅支持Chrome，Safari和Firefox，我可能會選擇不同的路線，並使用本機選擇樣式或使用完全控制的下拉組件。

來源

2013-08-03 23:49:18

該解決方案不適用於Firefox。瀏覽器在背景圖片上呈現自己的下拉菜單。 –

它看起來像有2個FF錯誤與此相關：https://bugzilla.mozilla.org/show_bug.cgi?id=649849和https://bugzilla.mozilla.org/show_bug.cgi?id=605985您可以然而，使用文本縮進將箭頭推開。它看起來很奇怪，但最好不要使用外觀屬性並創建自己的組件。 –

僅供參考：我能夠使用unicode▲和▼（彼此重疊）（而不是背景圖像）重新創建箭頭。我在位於

瀏覽器（Webkit，IE，Firefox）更改背景的選擇

回答