Search code examples
cssbackground-colorselect-options

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

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>
Solution

  • 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>