Changing the text colour of a selected disabled option

Question

I have the following code:

select option:disabled:checked {
  color: grey;
}

<select>
  <option selected disabled>Initial Option</option>
  <option>One</option>
  <option>Two</option>
</select>

It did successfully select the right element. However, the problem is: I want to change the colour of the disabled option's text when it is selected (which is when we first load the page). Currently, I can only see the grey colour I have applied when I select another option in the dropdown select list. I want the initial selected colour to be grey to indicate that the user still has to choose another option. How can I achieve that?

Possible duplicate of [How to style the option of a html "select"?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) — Amiratak88, Feb 21 '19 at 04:38
What you asking about is achievable by changing color of the `select`, not `option`. But 1) I'm afraid that there is no pure css solution, because you would need to change parent css based on child data, and 2) A gray `select` may be a very awful technique because it would look like the select itself is disabled and you can not click on it. I think it would be better to add a fake option as a first `option` element that would say something like `Choose your option`. — Cheslab, Feb 21 '19 at 04:41
@Cheslab I see. After reading your comment, I tested out something and it appears that it is indeed true: the 'selected option' that appears visually above the dropdown list is the `select` element. Resorting to JS would certainly impact performance, though, right? — Richard, Feb 22 '19 at 09:35

Udara Kasun · Accepted Answer · 2019-02-22T06:32:37.423

1

This is a my idea for your problem, try this

$(document).ready(function(){
   $('#MySelect').val('Zero').change();   
});


$('#MySelect').on('change',function(){
   $($(this)).css("color", $(this).find("option").css('color','black'));
   
   var color = $(this).find("option[value="+$(this).val()+"]").attr('optioncolor');
   $($(this)).css("color", color);
   $($(this)).css("color", $(this).find("option[value="+$(this).val()+"]").css('color',color));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <select id="MySelect">
   <option value="Zero" selected optioncolor="red" >Zero</option>
   <option value="One" optioncolor="green">One</option>
   <option value="Two" optioncolor="yellow">Two</option>
 </select>

CodePen Example

edited Feb 22 '19 at 06:32

answered Feb 21 '19 at 05:43

Udara Kasun

2,182
18
25

Very close, you managed to change the color of the options for the rest of the list, **but not the 'Initial Option'**. In my browser, the 'Initial Option' text colour is still `black`. – Richard Feb 22 '19 at 04:16
@Richard I changed the answer check again – Udara Kasun Feb 22 '19 at 04:50
When I first run the code snippet, the 'Zero' is still black. Only when I have changed my selection to another option, say 'One', and select 'Zero' again does it turn red. I want it to be red the first time I load the page because it is the initial selection. The idea is to give users a notion that the initial option is invalid (thus, the colour grey). – Richard Feb 22 '19 at 06:27
mmm again i changed my answer – Udara Kasun Feb 22 '19 at 06:33
That worked. Thanks! Can I ask you some questions later if I fail to comprehend your later :-D? – Richard Feb 22 '19 at 06:50

score 0 · Answer 2 · answered Feb 21 '19 at 04:41

0

Try this :

.checked {
    color:green
 }


 <select>
   <option style="color:grey">Initial Option</option>
   <option class="checked">One</option>
   <option class="checked">Two</option>
 </select>

answered Feb 21 '19 at 04:41

Harish

123
11

score 0 · Answer 3 · answered Feb 21 '19 at 04:55

I added jQuery to add class to the selected option. Try this:

function selectOption() {
  var x = $('#select-dropdown').val()
  $('#select-dropdown option[value='+ x+']').attr("selected", true).attr("disabled", true)
}

select option:disabled:checked {
  color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select-dropdown" onChange="selectOption()">
  <option selected disabled>Initial Option</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
</select>

Changing the text colour of a selected disabled option

3 Answers3