Why does inline CSS only change the color of a html selected option when it is opened?

Question

Here's my code:

<select id="xyz" name="xyz">
  <option></option>
  <option value="Monday">Monday</option>
  <option style="color:red;" selected="selected" value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
</select>

When I open the drop down, the option is red. However, the selected item shown when the drop down is closed is NOT red.

How do I also make the item red when the drop down is closed?

Answer 1

You can do this by using CSS

option[selected] {
            color: red;
        }
        option {
            color: black;
        }
        select {
            color: red;
        }

<select id="xyz" name="xyz">
    <option></option>
    <option value="Monday">Monday</option>
    <option  selected="selected" value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
 </select>

Answer 2

This is somehow the same as this post

You can try this in your css and change styles until u achieve what u needed

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: red;
}
select option { color: black; }
select option[selected='selected']{
  color: red;
}

<select id="xyz" name="xyz">
    <option></option>
    <option value="Monday">Monday</option>
    <option style="color:red;" selected="selected" value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
</select>

Answer 3

This will work

Your HTML Code

<select id="xyz" name="xyz" onchange="this.className=this.options[this.selectedIndex].className" class="black">
    <option></option>
    <option value="Monday"  selected="selected">Monday</option>
    <option class="red"  value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
</select>

Your CSS Code will be

option{ color:black}
.black{ color:black}
.red{ color:red; }