html - 更改选定禁用选项的文本颜色

Question

我有以下代码：

select option:disabled:checked {
  color: grey;
}

<select>
  <option selected disabled>Initial Option</option>
  <option>One</option>
  <option>Two</option>
</select>

它确实成功地选择了正确的元素。但是，问题是：我想在选择禁用选项时更改其文本的颜色（这是我们第一次加载页面时）。 grey 目前，当我在下拉选择列表中选择另一个选项时，我只能看到我应用的颜色。我希望最初选择的颜色grey表明用户仍然必须选择另一个选项。我怎样才能做到这一点？

Answer 1

这是我对您的问题的想法，试试这个

$(document).ready(function(){
   $('#MySelect').val('Zero').change();   
});


$('#MySelect').on('change',function(){
   $($(this)).css("color", $(this).find("option").css('color','black'));
   
   var color = $(this).find("option[value="+$(this).val()+"]").attr('optioncolor');
   $($(this)).css("color", color);
   $($(this)).css("color", $(this).find("option[value="+$(this).val()+"]").css('color',color));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <select id="MySelect">
   <option value="Zero" selected optioncolor="red" >Zero</option>
   <option value="One" optioncolor="green">One</option>
   <option value="Two" optioncolor="yellow">Two</option>
 </select>

CodePen 示例

Answer 2

尝试这个 ：

.checked {
    color:green
 }


 <select>
   <option style="color:grey">Initial Option</option>
   <option class="checked">One</option>
   <option class="checked">Two</option>
 </select>

Answer 3

我添加了 jQuery 以将类添加到所选选项。尝试这个：

function selectOption() {
  var x = $('#select-dropdown').val()
  $('#select-dropdown option[value='+ x+']').attr("selected", true).attr("disabled", true)
}

select option:disabled:checked {
  color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select-dropdown" onChange="selectOption()">
  <option selected disabled>Initial Option</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
</select>