在"选择"中将"第一个选项"设置为灰色，将"其他"选项设置为

Question

以下是我的代码，它在Firefox 68.0.2中运行良好，但在Chrome 76和Safari 12.1.2上则不行。让我知道解决方法或我在这里做错了什么。

我想将第一个选择选项设置为灰色，将选项的其余部分设置为黑色。

法典-

$(document).ready(function(){
$("select").change(function(){
if ($(this).val()=="") $(this).css({color: "#aaa"});
else $(this).css({color: "#000"});
});

});	

select{
color:#aaa;
}
option:not(first-child) {
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
	<option value="">Please select and option</option>
	<option>#1</option>
	<option>#2</option>
	<option>#3</option>
	<option>#4</option>
</select>

Answer 1

更改 CSS

select{
color:#aaa;
}
option{
color:#000;
}
option:first-child {
color: #aaa;
}

$(document).ready(function(){
$("select").change(function(){
if ($(this).val()=="") $(this).css({color: "#aaa"});
else $(this).css({color: "#000"});
});

});

select{
color:#aaa;
}
option{
color:#000;
}
option:first-child {
color: #aaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
	<option value="">Please select and option</option>
	<option>#1</option>
	<option>#2</option>
	<option>#3</option>
	<option>#4</option>
</select>

Answer 2

给出option:first-childcolor属性为灰色，其他属性为黑色。喜欢这个

$(document).ready(function(){
$("select").change(function(){
if ($(this).val()=="") $(this).css({color: "#aaa"});
else $(this).css({color: "#000"});
});

});	

select option { color: black; }
select option:first-child{
color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
	<option value="">Please select and option</option>
	<option>#1</option>
	<option>#2</option>
	<option>#3</option>
	<option>#4</option>
</select>