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

Question

我有以下选择器：

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

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

 $('#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

Simple Working Solution!!!

这可能是因为你在js中添加了select选项，js在css之后加载。

所以你应该在 js 或 jquery 中为选择选项添加颜色。请参考代码。

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

这里是工作DEMO Fiddle。

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;
}