Option ausgewählte Textfarbe

Question

Ich habe ein HTML-Auswahlformular mit mehreren Optionen.

Ich möchte die Farbe der Textoptionen aber nur für bestimmte Optionen ändern. In meiner Fiedel unten, habe ich die Farbe für die Dienstag Option geändert, aber die Änderung ist nur sichtbar, wenn Sie die Optionen nach unten scrollen. Wie könnte ich die spezifische Farbe auch sichtbar für Dienstag, wenn es ausgewählt ist, d. H. An der Spitze der Optionen?

Fiddle: https://jsfiddle.net/bb61c412/280/

Code:

.form-control { 
 
    color: blue; 
 
} 
 

 
.selected { 
 
    color: red; 
 
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
 

 
<form action="#" id="form" method="post" data-toggle="validator" style='text-align:center;'> 
 
    <div class="form-inline"> 
 

 
    <select class="form-control" name="date"> 
 
     <option value="0"> 
 
     Date 
 
     </option> 
 
     <option value="1"> 
 
     Monday 
 
     </option> 
 
     <option value="2" selected class="selected"> 
 
     Tuesday 
 
     </option> 
 
     <option value="3"> 
 
     Wednesday 
 
     </option> 
 
     <option value="4"> 
 
     Thursday 
 
     </option> 
 

 
    </select> 
 

 
    </div> 
 

 
</form> 
 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>