0

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.

Devlina Das
  • 1
  • 1
  • Does this answer your question? [How to style Disabled Options in a form](https://stackoverflow.com/questions/15602140/how-to-style-disabled-options-in-a-form) – Priya jain Sep 18 '20 at 11:10

4 Answers4

0

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>
Priya jain
  • 1,127
  • 2
  • 10
  • 22
  • Hi, Thanks for your answer. But Using this if I have selected an option and then the select box is disabled, the option would look like a placeholder too, lets say the placeholder's/disabled option's color is red and the color of the other option is blue, this differentiation can be made using :invalid but it works only required state, How do I implement the same in the disabled state? Hope I am able to explain :) – Devlina Das Sep 18 '20 at 06:03
  • I updated my answer. you want to do something like that? – Priya jain Sep 18 '20 at 11:06
0

This should work :

select:disabled {
  background: red; /* For exemple */
}
dimby
  • 1
  • 1
0

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>
Ritika Gupta
  • 376
  • 1
  • 16
  • @Devlina Das, I think you wanted the opaque background effect which appears when we give disabled mode to select along with additional CSS which shows disabled select box invalid, i have tried covering the scenarios. Let me know if it works for you. – Ritika Gupta Sep 17 '20 at 12:56
  • Hi, thanks for your answer. Actually 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 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/non-editable for some condition the option is looking like it is a placeholder because of the italics style. – Devlina Das Sep 18 '20 at 05:55
0

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>
Abdulmajeed
  • 552
  • 7
  • 8