如何自定義HTML選擇選項菜單？

可能重複：
How to make a custom select option menu style without image in CSS?如何自定義HTML選擇選項菜單？

是否有可能藏漢定製HTML選擇選項菜單的外觀爲它的連接按鈕，你怎麼做到這一點，如果它是什麼？

比如我有一個看起來像這樣

<select id="music" title="Music Genres"> 
<option>Ambient</option> 
<option>Acoustic</option> 
<option>Alternative</option> 
<option>Beat</option> 
<option>Break</option> 
<option>Bass</option> 
</select>

菜單，但我需要使它看起來像我的網站的其他部分，而不是其默認設計

我發現這個視頻教程在YouTube上告訴你如何完成（排序）http://www.youtube.com/watch?v=jzvRue8pS-U

來源

2011-11-20 Farreal

這是非常難的風格<select>正確的標籤不同的瀏覽器/操作系統，使它們是不同的。

您可以使用JavaScript構建一個選擇框類型的控件，如果您使用的是jQuery，那麼有很多插件可以做到這一點，比如this one。谷歌搜索jquery select box應該讓你開始。

當然，沒有jQuery是可以的，但更困難。在一天結束時：造型<select>標籤非常不可靠。儘管支持非常基本的屬性，但大多數CSS屬性都不支持。

來源

2011-11-20 19:44:20 Bojangles

這真的取決於你想要做什麼。您可以像修改任何其他網站元素一樣修改它及其成員，但基於瀏覽器和操作系統有一些限制（例如它總是某種列表）。

所以，你可以做任何以下的：

<select id="music" title="Music Genres" style="background-color: #c0c0c0; color: #000000"> 
<option style="font-weight: bold">Ambient</option> 
<option class="some-css-class">Acoustic</option> 
</select>

來源

2011-11-20 19:43:11 Mario

如上所述，不同的瀏覽器對樣式表單元素有不同的支持;它們的視覺風格由操作系統決定。

理論上，從約定的角度來看，不應該是樣式表單元素，因爲它是瀏覽器UI的一部分。

來源

2011-11-20 19:46:39

從評論中採取類似先前的問題：

CSS/HTML - Styling select boxes properly

select元素將只接受非常有限的CSS，因爲它們是由操作系統，而不是瀏覽器本身呈現。您可以使用樣式的ul（或ol）和一些JavaScript來模擬select;但設計元素本身幾乎不可能實現可靠。閱讀本問題上的JavaScript方式一些指針（儘管 jQuery的，而不是簡單的JS）：Html Select box options on Hover?

雖這麼說，你可以使用簡單的CSS的程度，但每一個瀏覽器將使其略有不同的輸出（背景，邊框，字體屬性等 - 與大多數CSS屬性/值相同）。正如其他人所說，你可以使用jQuery/Javascript來處理它們，但人們對這是否是好的做法有不同的看法。上面提到的問題有一個例子。

來源

2011-11-20 19:50:34 Joe

如何自定義HTML選擇選項菜單？

回答

相關問題