这是我的HTML:

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

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


当前回答

这是一个html css代码,用于样式选项和选择标签。 选择的选项:背景和粗体 关闭后,它看起来是斜体。

    <style>
        .mydropdown{
         border:none;
         border-bottom:2px dotted black;
         display:inline;max-width:20%;
         font-style: italic;
         font-weight: 600;
         cursor: pointer;  
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
         border:2px dotted green;
    }
    .myoption{
         font-style: normal;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        font-style: italic;
        font-weight: 600;
     }
    </style>

其他回答

正如已经提到的,唯一的方法是使用一个插件来替换<select>功能。

jQuery插件列表:http://plugins.jquery.com/tag/select/

看一下使用Select2 plugin: http://jsfiddle.net/swsLokfj/23/的例子

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

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

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

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

例子:

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

它看起来是这样的:

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

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

如果你不想使用JavaScript,试试这个:

select {
  margin-top: 2% !important;
  font-size: 19px !important;
  text-align: center !important;
  width: 25% !important;
  padding: 6px 12px !important;
}
option {
  min-height: 1.5rem !important;
  padding: 14px !important;
}