How do I give styling to select placeholder when it is disabled? - html

Question

I have a requirement in my project to give a particular type of styling to the default i.e. placeholder value of a select tag when the select is "disabled".
I am aware that it can be given using select:invalid but I find it working only when select is "required" and but I want a solution for the below scenario.
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
Note:
The requirement I have to resolve is in the select box the placeholder option i.e. the disabled option "-please choose-" has to be in italics and the rest of the options have to be in normal font style. Even when the select box is expanded. so you see in the "required state" I am able to give them different styles using :invalid selector(which doesn't works when the select is in "disabled state"), but in the disabled state, I am able to give just one type i..e italics or normal, if an option is selected and the select box is disabled/made non-editable following some condition, the option is looking like it is a placeholder because of the italics style.

Answer 1

This should work :
select:disabled {
background: red; /* For exemple */
}

Answer 2

I tried my best understanding your problem statement and hence tried to cover the explanatory scenarios which might work for you , please go through the developer comments in both the html and css files.
select:invalid,
select:disabled{
border-color: red;
}
/*
these are the default values which select disabled attribute adds to the CSS of select box by default
opacity: 0.7;
border-color: rgba(118, 118, 118, 0.3);
*/
<!--Scenario 1: Where you had only the required attribute and wanted to validate it by say border red-->
<select required>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<!--Scenario 2: where your selectbox is disabled yet shows a required type error-->
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>

Answer 3

Please use this CSS approach in all condition of select menu :-
select{color:pink;}
select option{color:blue;}
select option[disabled]{color: red; font-style:italic;}
select:disabled{color: yellow; font-style:italic;}
<select disabled>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
<select>
<option disabled value="" selected>- please choose -</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>

Answer 4

try this It's working for me
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>