title: CSS how to change text color of disabled option inside a select?
body: <p>I have the following selector:</p>
  
  <pre><code>&lt;div id="cameraSourceWrap" class="settingRow adminShow"&gt;
    &lt;select id="cameraSource" class="js-example-basic-single"&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In which I create the options in JS in a for loop:</p>
  
  <pre><code> $('#cameraSource').append('&lt;option id="camera' + i + '" class="optionC" value=' + i + '&gt;' 
  + config.video.videoCapturer.devices[i] + '&lt;/option&gt;');
  </code></pre>
  
  <p>Now I added inside my CSS file this:</p>
  
  <pre><code>.optionC {
  color: blue;
  }
  .optionC:disabled {
  color: red;
  }
  .optionC[disabled=disabled]{
  color: red;
  }
  </code></pre>
  
  <p>This is what I get inside the inspector:
  <a href="https://i.stack.imgur.com/f2JQ5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2JQ5.jpg" alt="image of inspector in dev tools"></a></p>
  
  <p>This is what it looks like:
  <a href="https://i.stack.imgur.com/dPzHd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dPzHd.jpg" alt="image of select on website"></a>
  Why aren't the views red for disabled? and blue for normal?</p>
  
  <p>EDIT: I have also tried with this:
  <a href="https://select2.github.io/" rel="nofollow noreferrer">https://select2.github.io/</a>
  Which makes it look different, but still the option objects do not respond</p>