更改所选禁用选项的文本颜色

Question

我有以下代码：

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

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

它已经成功地选择了正确的元素。但是问题在于：当选中禁用选项的文本时（也就是我们首次加载页面时），我想要改变其颜色。目前，只有在我选择下拉选择列表中的另一个选项时，才能看到应用的灰色颜色。我希望最初选定的颜色为灰色，以表示用户仍需选择另一个选项。我该如何实现这一点？

- Richard

---

可能是如何为HTML“select”样式选项？的重复问题。 - Amiratak88

你所询问的可以通过更改select的颜色来实现，而不是option的颜色。但是1）我担心没有纯CSS解决方案，因为您需要根据子数据更改父级CSS，2）灰色的select可能是一种非常糟糕的技术，因为它看起来像选择本身被禁用了，您无法单击它。我认为最好在第一个option元素中添加一个虚假选项，比如说“选择您的选项”。 - Cheslab

@Cheslab 我明白了。在阅读了您的评论后，我测试了一些东西，似乎确实是这样：出现在下拉列表上方的“选定选项”是 select 元素。但是，使用 JS 会影响性能，对吧？ - Richard

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 示例

- Udara Kasun

---

非常接近了，你成功地改变了列表其它选项的颜色，但是没有改变“初始选项”的颜色。在我的浏览器中，“初始选项”的文字颜色仍然是黑色。 - Richard

@Richard 我修改了答案，请再检查一遍。 - Udara Kasun

当我第一次运行代码片段时，“Zero”仍然是黑色的。只有当我将选择更改为另一个选项，比如“One”，然后再次选择“Zero”时，它才会变成红色。我希望在加载页面时第一次就是红色的，因为它是初始选择。这样做的想法是让用户知道初始选项是无效的（因此颜色为灰色）。 - Richard

我又改变了我的答案。 - Udara Kasun

好的，谢谢！如果我后面没理解，我可以稍后问你一些问题吗？:-D - Richard

Answer 2

试试这个：

.checked {
    color:green
 }


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

- Harish

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>

- yimei