html - 如何设置 html "select"元素的选项样式？

Question

这是我的 HTML:

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

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

Answer 1

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

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

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