如何对HTML的"select"元素的选项进行样式设置？

Question

这是我的HTML代码：

<select id="ddlProducts" name="ddProducts"> 
    <option>产品1：电子产品</option>
    <option>产品2：体育用品</option>
</select>

我想要使用CSS将产品名称（即'产品1'，'产品2'等）加粗，并将其类别（即电子产品，体育用品等）斜体化。我找到了一个旧问题，提到使用HTML和CSS是不可能的，但希望现在有解决方案。

Answer 1

不，这是不可能的，因为这些元素的样式由用户的操作系统处理。MSDN将在此回答您的问题：

Answer 2

只有很少的样式属性可以应用于<option>元素。

这是因为这种类型的元素是“替换元素”的一个例子。它们依赖于操作系统，并且不是HTML/浏览器的一部分。它不能通过CSS进行样式设置。

有一些替代插件/库看起来像<select>，但实际上是由常规HTML元素组成的，可以进行样式设置。