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

Simple Working Solution!!!

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

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

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

以下是工作DEMO Fiddle。

Answer 2

你可以在css中使用:disabled psuedo类。

＆＃13;

＆＃13;

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

＆＃13;

.optionC {
  color: blue;
}

.optionC:disabled {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以尝试使用＆＃34;！重要＆＃34;。 像这样：

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