CSS how to change text color of disabled option inside a select?

Question

I have the following selector:

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

In which I create the options in JS in a for loop:

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

Now I added inside my CSS file this:

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

This is what I get inside the inspector:

This is what it looks like: Why aren't the views red for disabled? and blue for normal?

EDIT: I have also tried with this: https://select2.github.io/ Which makes it look different, but still the option objects do not respond

Possible duplicate of [Change the 'option' color with the attribute 'disabled'](http://stackoverflow.com/questions/30065920/change-the-option-color-with-the-attribute-disabled) — roberrrt-s, Dec 14 '16 at 12:28
@Roberrrt - the problem with that duplicate is that none of the answers actually work :p — Jaromanda X, Dec 14 '16 at 12:34
@Roberrrt Jaromanda is right, none of those answers work for my case — rosu alin, Dec 14 '16 at 13:11
It seems OSX doesn't allow styling of `option` elements: http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element — Kyle, Dec 14 '16 at 13:26

Logeshwaran · Accepted Answer · 2016-12-14T13:28:03.990

2

Simple Working Solution!!!

It may be because since u add select option in js, js gets load after the css.

So u should add the color for select option in js or jquery. Please refer the code.

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

Here is the Working DEMO Fiddle.

edited Dec 14 '16 at 13:28

answered Dec 14 '16 at 12:51

Logeshwaran

461
5
11

This does not work. I added this lines both before and after creating the options programatically. And neither does the "color: red!important;" part work – rosu alin Dec 14 '16 at 13:05
Even in jsfiddle, with the link that you gave me, it is still gray for disabled: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/GewdBW2qnHVmvhQ/upload.png – rosu alin Dec 14 '16 at 13:13
are u using safar browser? – Logeshwaran Dec 14 '16 at 13:15
Chrome, and Chromium. I need the change in colour to be valid inside a Android WebView. So I am testing it inside Chrome, and inside the webview of a Nexus 7 Android 5.0 device. – rosu alin Dec 14 '16 at 13:18
In safari, your code, in jsfiddle, it changes the text color of the selected one. so $("select").css("color", "blue"); does work, but not the option ones. PS I'm on a Mac running Sierra 10.12. If it helps – rosu alin Dec 14 '16 at 13:20

score 0 · Answer 2 · answered Dec 14 '16 at 12:41

you can use the :disabled psuedo class in css.

 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>

Still no red: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/GS9ID4rVtBnIvx0/upload.png — rosu alin, Dec 14 '16 at 13:14

score -1 · Answer 3 · answered Dec 14 '16 at 12:40

-1

You can try with "!Important". Like this :

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

answered Dec 14 '16 at 12:40

Thomas

7
2

Please do not _ever_ suggest using !important. – Kyle Dec 14 '16 at 13:22
Can you please tell me why ? – Thomas Dec 14 '16 at 14:41

CSS how to change text color of disabled option inside a select?

3 Answers3