CODEWITHSUNDEEP
javascripthtmlcssselecthtml-select
rosu alin
rosu alin

Reputation: 5830

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

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: image of inspector in dev tools

This is what it looks like: image of select on website 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

Upvotes: 0

Views: 2288

Answers (3)

Logeshwaran
Logeshwaran

Reputation: 461

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.

Upvotes: 2

iHasCodeForU
iHasCodeForU

Reputation: 177

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>

Upvotes: 0

Thomas
Thomas

Reputation: 7

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

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

Upvotes: -1

Related Questions