Question

所以我有一个带有多个选项元素的select元素。除一个之外的所有选项元素都包含：

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>

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

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

我希望select元素中的文本也是红色的。但是文字是黑色的。

Answer 1

纯css我不认为这是可能的。您可以使用select {color:red}，但这会使所有option的颜色变为红色。要实现你需要的东西可能需要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');
});

演示： http://jsfiddle.net/xrPKN/2/

Answer 2

然后你必须通过JavaScript改变选择的颜色。像

这样的东西

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

Answer 3

.textRed{color:red}

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

选择的选项松开红色

3 个答案: