Pre selected option highlighted grey on page load, want it to be blue

303 Views Asked by At

for example, when you go to the page below with this code, upon load option one is selected and has a background color of grey. When I click it it turns blue. How can I have it that blue when the page loads, not grey.

<select class="select" multiple="multiple" id="select_id">
<option selected>option one</option>
<option>option 2</option>
<option>option 3</option>
</select>
1

There are 1 best solutions below

5
StepUp On BEST ANSWER

You can override background color of selected value like this:

select option:checked{ 
  background: lightgreen -webkit-linear-gradient(bottom, lightgreen 0%, lightgreen 100%);
}
<select class="select" multiple="multiple" id="select_id">
    <option selected>option one</option>
    <option>option 2</option>
    <option>option 3</option>
  </select>