这是我的HTML:

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

我想让产品的名称(即。'Product1', 'Product2',等等),以及它的类别(即。电子,体育等)斜体,只使用CSS。我发现了一个老问题,提到这是不可能使用HTML和CSS,但希望,现在有一个解决方案。


当前回答

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

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

例子:

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

它看起来是这样的:

其他回答

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/

似乎我可以直接在Chrome或Firefox中为选择设置CSS。CSS和HTML代码提供如下:

. boldoption { font-weight: bold; 的 选择< > <option>一些规范-字体 <option>另一种规范-字体option</option> <option class=“boldoption”>一些勇敢的选择</option> 选择< - >

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

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

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

一些属性可以为<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。

注意,自定义字体并不适用于移动选择。

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

除了background-color和color,通过style对象应用于option元素的样式设置将被忽略。