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

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

问题是，macOS 没有设置

option

的样式。 所以这是有效的方法：

select {
     color: lightblue;
}

select:has(option[disabled]:checked) {
     color: coral;
}
/* if you prefer styling the option with an empty value: */
select:has(option[value=""]:checked) {
     color: purple;
}

Answer 4

您可以使用 属性选择器

select[disabled]{
  color: #f00;
}

Answer 5

在此处尝试此样式

select option:first-child

将选择您的第一个已禁用的选项。

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