CSS - 無法在Dropdown中覆蓋字體樣式

我想在關閉下拉菜單時只將可見項目上的自定義樣式放入，而不是下拉菜單中的項目。CSS - 無法在Dropdown中覆蓋字體樣式

爲此，我將自定義樣式放在select上，然後在option上撤消它們。例如，我在select元素上設置了font-style: italic。但是webkit瀏覽器和IE10似乎忽略了字體風格的覆蓋。

HTML

<select> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
    <option>Four</option> 
</select>

CSS

select { 
    color: red; 
    font-style: italic; 
} 
option { 
    color: black; // undos color:red 
    font-style: normal!important; // This should undo the italic font style. 
}

jsFiddle

爲什麼這些瀏覽器忽略字體樣式覆蓋甚至!important？我怎樣才能解決這個問題？

來源

2014-03-12 CookieMonster

選擇框對所有瀏覽器都很差CSS樣式支持。

要有選擇框的總控造型，你將不得不使用JavaScript的解決方案的東西，可樣式來替代選擇框。 http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/是一種選擇，或者您最好查看jQuery插件或Bootstrap。

來源

2014-03-12 10:52:27 Ben

這就是我花了一些時間後纔開始意識到的。這是奇怪的... – CookieMonster

是的，你會想如果Web社區可以找到問題的解決方案，那麼瀏覽器開發人員也可以！ – Ben

我通過谷歌發現那是什麼選項元素實際上是由操作系統的風格，因此無法通過CSS設置樣式（沒有JavaScript或黑客等）。

來源

2014-03-12 10:48:28 Tazavoo

CSS - 無法在Dropdown中覆蓋字體樣式

回答

相關問題