如何将所选选项颜色与禁用选项分开设置样式答案

【问题标题】：How to style selected option color separately from disabled option如何将所选选项颜色与禁用选项分开设置样式
【发布时间】：2014-04-04 13:12:12
【问题描述】：

我有一个 HTML 下拉选择菜单，其中第一个选项被禁用。我想以灰色显示默认禁用选项，但是一旦我选择了另一个值，我希望它显示为蓝色。我怎样才能做到这一点？

我设法让所选选项在列表中显示为灰色，而可选选项在列表中显示为蓝色。但是禁用和未禁用选项一旦被选中，无论如何都会显示为灰色：

select:not(:checked) {
  color: gray;
}
select option:not(:disabled){
  color: #000098;
}

【问题讨论】：

我不认为这是他要问的。

标签： html css select option selected

【解决方案1】：

您可以使用attribute selector

select[disabled]{
  color: #f00;
}

【讨论】：

【解决方案2】：

在此处尝试此样式select option:first-child 将选择您禁用的第一个选项。

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

【讨论】：

【解决方案3】：

如果您将所需的标签放在选择元素上，您可以这样做。

HTML：

<select name="number" required>
  <option value="" disabled selected hidden>Placeholder</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

CSS：

select:required:invalid {
  color: gray;
}
select, option {
  color: blue;
}

https://jsfiddle.net/p63eg7d8/

【讨论】：

这是一个不错的 hack :)

【解决方案4】：

function check(){
 var ddl = document.getElementById("select");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "0"){
      document.getElementById('select').style.color = 'gray';
    }else{
      document.getElementById('select').style.color = 'blue';
    }
    
    var i;
    for (i = 0; i < 3; i++) { 
    ddl.options[i].style.color = 'blue';
    }
    ddl.options[0].style.color = 'gray';
}

window.onload = function(){
   check();
}

<select id='select' required onchange='check()'>
  <option value="0">Default</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

改变选择onChange的颜色。我不知道你是否只想用纯 css 来做，但我不明白为什么你不能使用 javascript。

V2。快速编辑！使其在加载 <select> 时默认为蓝色，因为默认选项应为蓝色。

V3。另一个编辑！它还设置了选项的样式，所以我没有设置选项的样式，只是选择！

V4。小幅编辑，压缩了很多代码以使其看起来更好。

V5。哎呀。我很傻，OP说灰色不是黑色。将color = 'black'的所有引用更改为color = 'gray'

最终答案。不再进行任何编辑。

【讨论】：