这是我的HTML:

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

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


当前回答

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

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

其他回答

这是一个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>

你可以添加一个类并给出font-weight:700;在选择。但是通过使用这个,所有的文本将变成粗体。

如果你不想使用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;
}

实际上你可以添加:before和:after并设置样式。至少它是有意义的

选择{ 字体大小:18 px; background - color: # ffffff; } 之前选择:{ 内容:“>”; 字体大小:20 px; 显示:没有; padding-right: 10 px; padding-left: 5 px; 颜色:# fff; } 选择:徘徊:{之前 显示:内联; } <select id="ddlProducts" name="ddProducts"> <option>Product1: Electronics </option> <option>Product2: Sports </option> < /选择>

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

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

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