CSS如何更改select中的禁用选项的文本颜色？

Question

我有以下选择器：

<div id="cameraSourceWrap" class="settingRow adminShow">
  <select id="cameraSource" class="js-example-basic-single">
  </select>
</div>

在其中，我在for循环中的JS中创建选项：

 $('#cameraSource').append('<option id="camera' + i + '" class="optionC" value=' + i + '>' 
+ config.video.videoCapturer.devices[i] + '</option>');

现在，我在CSS文件中添加了以下内容：

.optionC {
color: blue;
}
.optionC:disabled {
color: red;
}
.optionC[disabled=disabled]{
color: red;
}

这是我进入检查器的内容：

看起来是这样的： 为什么视图的残障视图不是红色的？ 和蓝色正常？

编辑：我也尝试过此： https : //select2.github.io/这使它看起来不同，但选项对象仍然没有响应

Answer 1

简单的工作解决方案！！！

可能是因为自从在js中添加了select选项，所以js在css之后获得了加载。

因此，您应该在js或jquery中为select选项添加颜色。 请参考代码。

$("option.optionC").css("color","blue");
$("option.optionC:disabled").css("color","red");

这是工作演示小提琴 。

Answer 2

您可以在CSS中使用：disabled psuedo类。

  for (i = 0; i < 10; i++) { $('#cameraSource').append('<option id="camera' + i + '" class="optionC" value=' + i + '>check</option>'); // make half of the options disabled for this example if(i%2===0){ $('#camera'+i).attr('disabled','disabled'); } } 

 .optionC { color: blue; } .optionC:disabled { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cameraSourceWrap" class="settingRow adminShow"> <select id="cameraSource" class="js-example-basic-single"> </select> </div> 

Answer 3

您可以尝试使用“！重要”。 像这样 ：

.optionC:disabled
{
color : red !important;
}