这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
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/
其他回答
这是一个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>
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
如果你不想使用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;
}
不，这是不可能的，因为这些元素的样式是由用户的操作系统处理的。MSDN将在这里回答你的问题:
除了background-color和color，通过style对象应用于option元素的样式设置将被忽略。
这里留下一个快速的替代方法，使用表上的类切换。它的行为与选择非常相似，但是可以使用过渡、滤镜和颜色进行样式化，每个子元素都是独立的。
function toggleSelect(){ if (store.classList[0] === "hidden"){ store.classList = "viewfull" } else { store.classList = "hidden" } } #store { overflow-y: scroll; max-height: 110px; max-width: 50% } .hidden { display: none } .viewfull { display: block } #store :nth-child(4) { background-color: lime; } span {font-size:2rem;cursor:pointer} <span onclick="toggleSelect()">⮋</span> <div id="store" class="hidden"> <ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul> </div>
