Question

可能重复：
How to make a custom select option menu style without image in CSS?

是否可以自定义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

Answer 1

很难正确设置<select>个标签，因为不同的浏览器/操作系统会以不同的方式呈现它们。

您可以使用JavaScript构建一个选择框类型控件，如果您使用的是jQuery，那么有很多插件可以做到这一点，比如this one。谷歌搜索jquery select box应该让你开始。

当然可以不使用jQuery，但更难。在一天结束时：样式<select>标签非常不可靠。虽然支持非常基本的属性，但大多数CSS属性都不支持。

Answer 2

这实际上取决于你想做什么。您可以像修改任何其他网站元素一样修改它及其成员，但是基于浏览器和操作系统存在一些限制（例如，它总是某种列表）。

所以你可以做以下任何事情：

<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>

Answer 3

如上所述，不同的浏览器对样式表单元素有不同的支持;它们的视觉风格由操作系统决定。

从理论上讲，从会议的角度来看，不应该样式表单元素，因为它是浏览器UI的一部分。

Answer 4

取自前一个类似问题的评论：

CSS / HTML - Styling select boxes properly

select元素只会接受非常有限的CSS，因为它们会被渲染由操作系统，而不是浏览器本身。您可以使用a来模拟select 样式ul（或ol）和一些JavaScript;但造型select 元素本身几乎不可能实现可靠。读这个关于JavaScript方法的一些指示的问题（尽管有 jQuery而不是简单的JS）：Html Select box options on Hover?

据说你可以在一定程度上使用简单的CSS，但是每个浏览器都会使用它的输出（背景，边框，字体属性等 - 与大多数CSS属性/值相同）略微不同地呈现它们。正如其他人所说，你可以使用jQuery / Javascript来处理它们，但是人们对这是不是很好的做法有不同的看法。关于上述问题，有一个例子。

如何自定义HTML选择菜单？

4 个答案: