Preventing change in colour and background colour of selected option when blurred

Question

This is my select box in focus:

And my select box while blurred:

As you can see, the selected option for my focused select box is highlighted blue, whereas for my blurred select box, the selected option is highlighted grey.

---

This is my HTML if anyone needs it:

<select size='9' id="functions_select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected>Option 3</option>
</select>

CSS:

* {
    outline: none;  
}

---

Is it possible to make it such that when blurred, the selected option for my select box will remain blue?

Answer 1

I have a solution for you:

* {
    outline: none;  
}


option:checked {
    color: white;
    -webkit-text-fill-color: white;
    background: #1e90ff repeat url("https://i.sstatic.net/Istm3.jpg");
}

<select size='9' id="functions_select" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected>Option 3</option>
</select>

It using background-image for option, this won't let browser use default background color.