如何使用 CSS 为选定的选项字符串设置 2 种不同颜色的样式？答案

【问题标题】：How do I style a selected option string with 2 different colors using CSS?如何使用 CSS 为选定的选项字符串设置 2 种不同颜色的样式？
【发布时间】：2018-06-07 05:31:24
【问题描述】：

我有一个下拉选择元素，其中包含汽车名称和括号内的可用颜色。我希望能够做这样的事情：

<select class="cars">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>

在哪里

.cars {
   color: black;
   font-weight: bold;
}
.car-color {
   color: grey;
   font-weight: normal;
}

不幸的是，上面的这段代码不起作用。如何达到预期的效果？

【问题讨论】：

How to style the option of a html "select"?的可能重复

标签： html css select options

【解决方案1】：

您无法设置 option 元素的样式，因为它是由 OS 而非 HTML 呈现的。这就是它不能通过 CSS 设置样式的原因。

您可以使用一些插件来实现您想要做的事情，

W3schools 有一种简单的方法来设置下拉列表的样式，check it here。

【讨论】：

【解决方案2】：

你可以使用这样的东西

.carcolor{
    color: grey;
}

$('<option>').val('india').text('india').attr('class','carcolor')
.appendTo('#groupid');

【讨论】：

【解决方案3】：

尝试如下 css ，第一个示例适用于所有选项，第二个示例适用于特定的第 n 个孩子，如果您有多种样式

.cars1,.cars2 {
   color: green;
   font-weight: bold;
}
.cars1 option{
   color: red;
   font-weight: normal;
   
}
.cars2 option:nth-child(2) {
   color: red;
   font-weight: normal;
}

<select class="cars1">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>
<br/><br/><br/>
<div></div>

<select class="cars2">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>

【讨论】：