可能重复：
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
【问题讨论】：
很难正确设置<select> 标签的样式，因为不同的浏览器/操作系统会以不同的方式呈现它们。
您可以使用 JavaScript 构建一个选择框类型的控件，如果您使用的是 jQuery，那么有很多插件可以做到这一点，例如 this one。谷歌搜索 jquery select box 应该可以帮助您入门。
当然，不用 jQuery 也可以，但更难。归根结底：样式化<select> 标签非常不可靠。虽然支持非常基本的属性，但大多数 CSS 属性不支持。
【讨论】：
这真的取决于你想做什么。您可以像任何其他网站元素一样修改它及其成员，但存在一些基于浏览器和操作系统的限制（例如，它始终是某种列表）。
因此您可以执行以下任何操作：
<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>
【讨论】：
如上，不同的浏览器对表单元素的样式支持不同；它们的视觉风格由操作系统决定。
理论上，从惯例的角度来看，您不应该设置表单元素的样式，因为它是浏览器 UI 的一部分。
【讨论】：
取自上一个类似问题的评论：
CSS / HTML - Styling select boxes properly
select元素只接受非常有限的 CSS，因为它们是被渲染的 由操作系统，而不是浏览器本身。您可以使用select模拟 样式为ul（或ol）和一些JavaScript；但造型select元素本身几乎不可能可靠地实现。读这个 关于 JavaScript 方法的一些指针的问题（尽管有 jQuery 而不是普通的 JS）：Html Select box options on Hover?
话虽如此，您可以在一定程度上使用简单的 CSS，但每个浏览器都会在其输出（背景、边框、字体属性等 - 与大多数 CSS 属性/值相同）时稍微不同地呈现它们。正如其他人所说，您可以使用 jQuery/Javascript 来处理它们，但人们对这是否是好的做法有不同的看法。上面链接的问题有一个例子。
【讨论】：