这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
其他回答
您可以使用内联样式向<option>标记添加自定义样式。
<option style="font- family:宋体;“>选项1 > < /选项 这将只对这个<option>元素应用样式。
然后你可以使用一点javascript魔法，将内联样式应用到<select>标签中的所有<option>元素，如下所示:
var select = $(document).getElementById('#select-element-id')
Var选项= select.children('#option-element-id')
option.css(“粗细”、“大胆”)
option.css(“字体大小”、“24 px”)
您也可以使用<option value="" disabled> <br> </option>在选项之间添加换行符。
你可以添加一个类并给出font-weight:700;在选择。但是通过使用这个，所有的文本将变成粗体。
一些属性可以为<option>标签设置样式:
字体类型 颜色 字体- * 背景颜色
此外，您可以使用自定义字体的个人<选项>标签，例如任何谷歌字体，材质图标或其他图标字体从icomoon或类似。(这可能会方便字体选择器等)
考虑到这一点，您可以创建字体家族堆栈，并在<option>标记中插入图标，例如。
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option>
</select>
★取自Icons，其余取自Roboto。
注意，自定义字体并不适用于移动选择。
现在是2017年，有可能针对特定的选择。在我的项目中，我有一个class="variations"的表，选择选项在表单元格td="value"中，选择有一个ID select#pa_color。 option元素还有一个class选项="attached"(在其他类标记中)。 如果用户作为批发客户登录，他们可以看到所有的颜色选项。但是零售客户不允许购买2种颜色的选择，所以我禁用了它们
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
这需要一点逻辑，但以下是我如何针对禁用的选择选项。
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
这样，只有批发客户才能看到我的颜色选择。
Bootstrap允许你通过data-content使用样式:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
例子: https://silviomoreto.github.io/bootstrap-select/examples/
