如何设置 html“select”元素的选项样式？

Question

这是我的 HTML：

 <select id="ddlProducts" name="ddProducts">
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想仅使用 CSS 将产品名称（即“Product1”、“Product2”等）设为粗体，并将其类别（即电子、体育等）设为斜体。我发现一个老问题提到使用 HTML 和 CSS 是不可能的，但希望现在有一个解决方案。

原文由 MrClan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Diodeus - James MacFarlane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

除了 background-color 和 color ，通过选项元素的样式对象应用的样式设置将被忽略。

原文由 esqew 发布，翻译遵循 CC BY-SA 4.0 许可协议