如何将选定的选项颜色与禁用选项分开设置

Question

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

我设法让所选的选项显示为灰色，并且可选择的选项在列表中显示为蓝色。但是一旦选中，禁用和禁用选项都会显示为灰色：

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

Answer 1

如果您将必需的标记添加到选择元素，则可以这样做。

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/

Answer 2

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'

---

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

Answer 3

您可以使用attribute selector

select[disabled]{
  color: #f00;
}

Answer 4

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

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