下拉式選擇中的樣式文本選項

Question

我只是試圖將一些基本樣式應用於下拉選擇元素中的不同選項。在Firefox中，這些樣式可以工作，但在Chrome和IE9中，樣式不起作用，即使在Chrome中，我可以在調試檢查器中看到樣式正在被讀取並且沒有被任何其他樣式覆蓋。有任何想法嗎？

E.g這條規則：

select option.depth-0 { 
    font-weight: bold; 
} 

在此元素：

<option value="1" class="depth-0">Home</option> 

Answer 1

交換select和你的CSS選擇器option：

option.depth-0 select{ 
    font-weight: bold; 
} 

編輯

選項select元素實際上不是瀏覽器的一部分。它是OS的一部分。風格很難。

例如，您不能在select元素中更改某個option的height。改變font-weight也是這樣認爲的。

我看到的唯一選擇是創建您自己的自定義select元素。以JavaScript爲例。然後你可以自定義它，因爲你需要使用CSS。這將是交叉瀏覽器。