如何自定义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选择选项菜单？

回答

相关问题