Html 所选选项为松散红色

所以我有一个select元素和多个option元素。除一个选项外，所有选项元素都具有：

color: black;

一种选择是：

color: red;

例如：

<select name="foo">
    <option value="1" class="textBlack">1</option>
    <option value="2" class="textBlack">2</option>
    <option value="3" class="textRed">3</option>
    <option value="4" class="textBlack">4</option>
</select>

1.
2.
3.
4.

问题是，我希望红色文本的选项在被选中后保持红色。因此，当DOM中的HTML看起来像这样时（即，我单击select元素并选择红色选项）：

1.
2.
3.
4.

我希望select元素中的文本也是红色的。然而，文本是黑色的

.textRed{color:red}

---

非常简单，除非我遗漏了什么？

然后您必须通过JavaScript更改select的颜色。差不多

$("select").change(function(){
    $(this).css("color", $(this).children("option:selected").css("color")); 
});

---

对于纯css，我认为这是不可能的。您可以使用

选择{color:red}

，但这会将所有

选项都涂成红色。要实现您需要的功能，可能需要javascript，jQuery代码的示例如下：

$("select").change(function(){
    var current = $("select option:selected").attr("value");
    if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');}
});
$("select").click(function() {
    $("select option").css('color','black');
});

演示：
它是
颜色
而不是
文本颜色
@BoltClock我知道，它只是一个打字错误。很抱歉
$("select").change(function(){
    var current = $("select option:selected").attr("value");
    if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');}
});
$("select").click(function() {
    $("select option").css('color','black');
});