javascript - 下拉列表第一个元素样式

Question

我想在 jquery/javascript 中设置下拉列表的第一个元素的颜色。

意味着，是否选择了下拉列表的第一个元素，应该是某种特定的颜色。

例如：

让下拉列表中有 4 个元素：-

select
Car
Bike
Bus

然后第一个元素（选择）应该总是以某种特定的颜色显示。

编辑 ：

根据上图，选择字段在列表上是彩色的。但不是在默认文本上。

我想要两者。

Answer 1

$("#selectboxid option:eq(0)").css("color","red");// you can set any color

参考css和eq

Answer 2

尝试这个

html:

<select id="selectboxid">
<option selected="selected">Hello</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

JS：

$("#selectboxid").css("color","green");
$("#selectboxid option").not("#selectboxid :selected").each(function(){
$(this).css("color","black")
});
$("#selectboxid").change(function(){
    $("option",this).each(function(){
    $(this).css("color","black");
    })
    $(":selected",this).css("color","green");
})

小提琴

Answer 3

是你想要的吗？（带CSS）

select option:first-child{
    background:red;
}

这是一个小提琴：

http://jsfiddle.net/PjjmT/

Answer 4

试试看this，这对你有帮助

HTML

<select><option>ABC</option><option>CDE</option><option>FGH</option></select>

JS

$('select option:first-child').css("background-color", 'red');

Answer 5

我找到了完成任务的方法：

$("选择选项：first-child").css('color', 'gray');

if ($("#SelectedProductId").val() == "0") $("#SelectedProductId").css('color', 'gray'); 否则 $("#SelectedProductId").css('color', 'black');

$("#SelectedProductId").change(function () { if ($("#SelectedProductId").val() == "0") $("#SelectedProductId").css('color', 'gray' ); 否则 $("#SelectedProductId").css('color', 'black'); });

Answer 6

使用 CSS，您可以（在某些浏览器中，但不一定在所有浏览器中，考虑到样式select元素的可靠样式），为select选项设置样式（给定以下 HTML）：

<select>
    <option>Select</option>
    <option value="1">One</option>
    <option value="2">Three</option>
    <option value="3">Two</option>
</select>

和 CSS：

option {
    color: #f00;
}

option[value] {
    color: #000;
}

JS 小提琴演示。

上述方法需要使用能够理解属性选择器符号的浏览器，当然，还要option对具有valuecolor 属性的元素#000和没有属性的元素进行样式设置。optionvalue#f00