How to change selected option color when it is not on focus?

Question

select {
background-color: #ffffff;
font-size:1.5rem !important;
border:1px solid gray;
border-radius:3px;
box-shadow: 1px 1px 0 #828181;
}
option:checked, option:hover {
  color: #ffffff;
  background: #33CCFF;
}

<select id="list1" name="list1" size="15" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>

When option checked, it changed color, but when the select box is not on focus, these already selected options will change to gray, How can I make them consistent?

Possible duplicate of [Change select box option background color](https://stackoverflow.com/questions/12836227/change-select-box-option-background-color) — Ram Segev, Oct 30 '19 at 06:02
My mean is those options are checked, but not on focus. How to set these options colors which are checked but not on focus? — maxmas, Oct 31 '19 at 03:30

jeremy-denis · Answer 1 · 2022-09-07T13:16:19.377

To maintain blue color when option are checked on focus but not when there is no focus on select you have to define background color with this pattern

background: linear-gradient({color} 0%, {color} 100%);

select {
  background-color: #ffffff;
  font-size: 1.5rem !important;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: 1px 1px 0 #828181;
}

select:not(:focus) option:checked {
  background: linear-gradient(yellow 0%, yellow 100%);
}

option:checked,
option:hover {
  color: #ffffff;      
  background: linear-gradient(#33CCFF 0%, #33CCFF 100%);
}

<select id="list1" name="list1" size="15" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

How to change selected option color when it is not on focus?

1 Answers1