HTML Select Always have Blue Background Regardless of Focus

I am using this example of HTML select multiple Attribute: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple. The code is below:

<!DOCTYPE html>
<html>
<body>

<h1>The select multiple attribute</h1>

<p>The multiple attribute specifies that multiple options can be selected at once:</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</p>

</body>
</html>

When I select the Volvo option, it has a blue background:

When I click somewhere else on the screen (to remove the focus), the background for Volvo becomes grey:

My question: How do I make the background on my selection (in this case, Volvo) always blue, regardless of focus?

Solution

As far as I know, the color and background-color cannot be changed with the :checked pseudo-element, but it can be mimic with the help of a linear-gradient.

option:checked {
  background: linear-gradient(lightblue, lightblue);
}

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>