如何样式的html“选择”元素的选项?

这是我的HTML:

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

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

当前回答

您可以使用内联样式向<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>在选项之间添加换行符。

2018-07-19 14:30:55

其他回答

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

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

2016-08-15 21:15:45

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

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

例子:

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

它看起来是这样的:

2013-10-07 04:46:44

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

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

2011-08-26 18:05:44

现在是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;
}

这样，只有批发客户才能看到我的颜色选择。

2017-08-28 22:04:29