如何自定义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上找到了这个视频教程，它告诉你一种方法（某种程度上）

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

因此，您可以执行以下任一操作：

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

环境的
声学的

由于不同的浏览器/操作系统呈现出不同的标签样式，因此很难正确设置标签样式

您可以使用JavaScript构建一个selectbox类型控件，如果您使用jQuery，有很多插件可以做到这一点，比如。谷歌

jquery选择框

应该可以让你开始了

---

当然，不使用jQuery也可以，但更困难。一天结束时：设置标签的样式是非常不可靠的。虽然支持非常基本的属性，但大多数CSS属性不受支持。

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

---

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

摘自上一个问题中的注释类似：

select

元素在呈现时只接受非常有限的CSS 通过操作系统，而不是浏览器本身。您可以使用 样式为

ul

（或

ol

），以及一些JavaScript；但是设置

选择的样式

元素本身几乎不可能可靠地实现。读这个 关于JavaScript方法的一些指针的问题（尽管有 jQuery而非普通JS）：

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