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

赋予C:\> START c:/cygwin/bin/bash.exe myscript.sh的{{1}}属性为灰色，其他为黑色。像这样

color

option:first-child

$(document).ready(function(){

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

在“选择”中，将“首选”选项设置为灰色，将其他选项设置为黑色

2 个答案: