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

这是我的 HTML：

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

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

分割线

网友回答：

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

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

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

分割线

网友回答：

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

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

分割线

网友回答：

您可以在一定程度上设置选项元素的样式。

使用 CSS 选择器，您可以设置系统绘制的框内选项的样式。*

例：

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

模板简介：该模板名称为【HTML 如何设置 html “select” 元素选项的样式？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。