0

I want to change the color of the selected "option" of the "select" element, but when I use the "color" attribute, it applies to the entire list of "option" and not just the selected one, while if I use the "font-weight", it only applies to the selected "option" and not the entire list of "options". So, why is that? And how do I change the color of only the "option" that is being selected and appears in the "select" element?

select option:checked {
  color: red;
}

select {
  font-weight: bold;
  color: blue;
}
<select>
  <option>Something 1</option>
  <option>Something 2</option>
  <option>Something 3</option>
  <option>Something 4</option>
  <option>Something 5</option>
  <option>Something 6</option>
  <option>Something 7</option>
  <option>Something 8</option>
  <option>Something 9</option>
</select>

As you can see, I tried using the pseudo-class "checked", but what this does is to make the selected "option" different color, but only inside the list of "options", and not when it appears on the "select" element.

The "font-weight:bold" applies only to the selected "option", but as you can see, the "color" applies to the entire list.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
  • So, what i understand from these answers is that, only "color" and "background-color" applies to the "option" element. So, that would explain why font-weight applies to the "select" element, but not to the "option" list, while "color" applied to the "select" element also cascades down to the "option" list. Is that correct? –  Jul 24 '20 at 11:34
  • Yes, that is correct. – Heretic Monkey Jul 24 '20 at 11:36
  • If i click "submit" on your suggested question, is my question going to get deleted? Should i do that, or should i just pick a best answer here? –  Jul 24 '20 at 11:40
  • If the suggestion question's answers answer your question, you should choose that option. Your question will not be deleted. – Heretic Monkey Jul 24 '20 at 11:51

2 Answers2

0

you must specify the color for each choice as you see by adding the option rule:

select option:checked {
        color:red;
        
        }
        
    select {
        font-weight:bold;
        color:red;
    }
    
    option{
    color:blue;
    }
    
    
<select>
        <option>Something 1</option>
        <option>Something 2</option>
        <option>Something 3</option>
        <option>Something 4</option>
        <option>Something 5</option>
        <option>Something 6</option>
        <option>Something 7</option>
        <option>Something 8</option>
        <option>Something 9</option>
    </select>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
  • Yeah, this does work, but why does font-weight applies to the selected option only, while color applies to the entire list? –  Jul 24 '20 at 11:30
  • Formatting for certain controls that are rendered by the OS mainly and not by the browser is limited, depending on the browser, for example in firefox all option will bold. – Simone Rossaini Jul 24 '20 at 11:36
0

You can give the options a color rule while the parent select maintains its own color rule. I think this should solve your problem:

select {
  color: blue;
}

option {
  color: green;
}
Joshua
  • 589
  • 1
  • 5
  • 19
  • Yeah, this does work, but why does font-weight applies to the selected option only, while color applies to the entire list? –  Jul 24 '20 at 11:30
  • I'm not sure why, but my guess would be that is because the options are not actual dom elements. And maybe because some elements don't inherit some rules from their parent element. – Joshua Jul 24 '20 at 11:42