I am looping through available appointments and trying to change the color of the selected value in the dropdown(more than 1 dropdown in the list). I can see the color is different for each value but when I select it changes it back to black.
.appt-status select option[value="0"] {
color: #3EA47B;
}
.appt-status option[value="1"] {
color: #3EA47B
}
.appt-status option[value="2"] {
color: #FF0000;
}
.appt-status option[value="3"] {
color: #FFA927;
}<!-- begin snippet: js hide: false console: true babel: false -->
<div class="appointmentList" data-bind="foreach: visibleAppointments">
<select class="form-control appt-status" data-bind="value: confirmationStatus, event:{ change: $parent.statusChanged}" >
<option data-icon="" class="status-list" value="1" > Confirmed</option>
<option class="status-list" value="2" >Reschedule</option>
<option class="status-list" value="3" >Pending</option>
<option class="status-list" value="0" >Not opted-in</option>
</select>
</div>