如何为选定的选项和禁用的选项分别设置颜色

Question

我有一个HTML下拉选择菜单，第一个选项是禁用的。我想将默认禁用选项显示为灰色，但一旦选择另一个值，我希望它显示为蓝色。我该如何实现？

我成功让已选中的选项呈现为灰色，并且在列表中可选择的选项出现为蓝色。但是，无论启用还是禁用的选项一旦被选择都将以灰色的形式出现：

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

- Neoweiter

---

我认为这不是他所询问的内容。 - igneosaur

Answer 1

如果在select元素中添加required标签，您就可以这样做。

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/

- thepi

---

这是一个不错的技巧 :) - w411 3

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' 最终答案。不再进行任何编辑。

- Lorddirt

Answer 3

您可以使用属性选择器。

select[disabled]{
  color: #f00;
}

- Jonathan

Answer 4

尝试在这里使用这个样式 select option:first-child，它将选择你的第一个选项，即使它被禁用。

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

- chriz