CSS：樣式HTML <select>選擇題元素

我使用的是頁面上的一些<select row="3" multiple="multiple">元素。CSS：樣式HTML <select>選擇題元素

我一直想他們的風格，使文本的頁面的其餘部分內部匹配。
我開始更改字體（select {font-family: 'foo';}）。但是，我需要爲新字體增加字體大小和行高。它不會讓我改變這一點。我試過使用內聯樣式，樣式爲select，並且樣式爲option。

如何在<select>框內更改font-size和line-height之類的屬性？

2011-07-17 Nathan

您是否嘗試過更改選項元素本身的樣式？另外，您的結果可能會因瀏覽器而異。 – jtbandes

@jtbandes我有。是的，我期待瀏覽器的差異化;我只是瞄準近似。 – Nathan

遺憾的是並不是所有的瀏覽器允許您更改SELECT或選項的佈局。

你可能會說，留下選擇框，optgroup和選項的樣式可能會更好，只是將它們作爲默認值，因爲跨瀏覽器樣式是如此不一致，不值得費神。

很好的網站解釋你的東西CAN被定型爲以下內容：Table containing all info you need。

你的HTML：

<select multiple="multiple"> 
    <option value="1">Option one</option> 
    <option value="2">Option two</option> 
</select>

你的CSS（示例）：

select { 
    font-family: 'Times New Roman'; 
} 

select option { 
    background-color: #FFFF00; 
    color: #FF0000; 
}

2011-07-17 18:58:07 Jules

填充和字體大小不起作用。至少在鉻 –

這隻適用於Firefox。 – Nathan

添加到jsfiddle：http://jsfiddle.net/5TJmy/ - 在Vista上的Chrome（是的，真的！），字體大小和填充不被尊重。你能夠改變你的設置的填充和字體大小嗎？ –

結果可以取決於操作系統以及瀏覽器依賴性。儘管可以將CSS樣式應用於選擇元素和選項元素，但我可以看到某些瀏覽器（特別是舊的）可能只是推遲到操作系統顯示這些小部件。

2011-07-17 18:59:54

是的，我期待瀏覽器的區別;我只是瞄準近似。我沒有使用舊瀏覽器！此外，鏈接的問題是**下拉菜單**，這顯然更可風格... – Nathan

真的，當然好點。但從操作系統小部件的角度來看，它們是相似的，即使是新的瀏覽器也可以自由地忽略你的樣式。我可能不應該聯繫到這樣一個古老的問題，但我認爲的情緒仍然是準確的。我想你可能不得不推出自己的。有很多JS插件和pure-css解決方案用於菜單和列表框以及下拉菜單。祝你好運！ –

我很驚訝，沒有人提到Chosen呢。

Chosen是一個jQuery插件，它使長而笨重的選擇框變得更加用戶友好。

所有現代桌面瀏覽器的支持（火狐，Chrome，Safari和IE9）。對IE8的傳統支持也已啓用。在iPhone，iPod Touch和Android移動設備上禁用選擇。

因爲它取代一個div選擇元素，然後結合兩者之間的所有事件，你可以設定樣式但是你願意，它仍然會做出反應，就好像它是一個正常的選擇框。很酷。

2014-12-18 12:00:30

回答