0

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>
Eli
  • 21
  • 4
  • The hover over your options is done at the corresponding CSS files. There is no custom highlight options on mouse over effect. Probably this effect is described in your template's CSS. Try to open developers console (ctrl+shift+i) in Chrome. Choose Inspect Element. Select your item with the arrow. And look for the styles. – Undry Aug 13 '20 at 17:31

1 Answers1

0

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

Possibly duplicating this CSS disable hover effect

bbbryan14
  • 145
  • 1
  • 8