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

Question

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

<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;
}

不幸的是，以上代码无法正常工作。 我如何达到理想的效果？

Answer 1

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

您可以使用一些插件来达到您想要的目的，

W3schools有一种简单的样式来设置下拉菜单的样式， 请在此处进行检查 。

Answer 2

你可以用这样的东西

.carcolor{
    color: grey;
}

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

Answer 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>