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