如何根据特定选项更改文字颜色？

Question

我想将第一个选项的颜色更改为#ccc，其他则保持＃000，但它不起作用。为什么？谢谢。 我不想使用更改功能，我认为这是不必要的。

是这样的：

HTML：

<select id="continent"> 
     <option value="-1">continent</option> 
     <option value="1">US</option> 
     <option value="2">UK</option> 
    </select> 

JS：

$("#continent option[value='-1']").css('color','#ccc'); 

Answer 1

$("#continent").change(function(){ 
 
    $("#continent").val() == "-1" ? $("#continent").css("color", "red") : $("#continent").css("color", "blue"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="continent"> 
 
    <option value="-1">continent</option> 
 
    <option value="1">US</option> 
 
    <option value="2">UK</option> 
 
</select>

记住预设默认选项

Answer 2

这里的颜色是溶液

$('.mySelect').change(function() { 
    if($(this).find("option:selected").attr("value")==2){ 
    $(this).find('option:selected').css('color', 'red'); 
    }else{ 
    $(this).find('option:selected').css('color', 'blue'); 
    } 

}); 

在上面的代码中，我使用.find（）方法，其用于选择元件的选择子try this code in fiddle

Answer 3

为什么你要使用jQuery？这可以用纯CSS完成。

#continent option { 
 
    background-color: white; /* on XFCE the default background-color is #CCC! */ 
 
}

<select id="continent"> 
 
    <option value="-1" style="color:#cccccc">continent</option> 
 
    <option value="1">US</option> 
 
    <option value="2">UK</option> 
 
</select>

但是你可能不应该这样做，因为它看起来像选项被禁用，但事实并非如此。这违反直觉并违反可用性。

除此之外，它在其他操作系统上看起来不同。这是从上面的代码片段看起来像在Ubuntu与XFCE：

这是另一种解决方案是什么样子，如果选择了第一个选项也改变了<select>的颜色为浅灰色：

这就是为什么您应该使用<option value="-1" disabled>或另一种颜色。