在 html select 中悬停或选择项目时，如何避免更改背景颜色？

Question

I have in my page a drop-down for the user to select a color.

But when the user tries to select a color and hoover the mouse on top of the select items, the browser automatically changes the color of the items, that makes him difficult to make the selection.

I want to leave the browser to leave the back-color the way it is, maybe when hoovering to draw a yellow border around but not to change the back-color, How can I get that effect? This is my select

Defined

<option value="#DC626D" style="background: #DC626D"></option> <option value="#E8825D" style="background: #E8825D"></option> <option value="#FFCD8F" style="background: #FFCD8F"></option> <option value="#FDEE65" style="background: #FDEE65"></option> <option value="#52CE90" style="background: #52CE90"></option>

Answer 1

You can use the css selector option:hover to handle any hover effect.

Possibly duplicating this CSS disable hover effect