Change Select List Option background colour on hover

Question

Is it possible to change the default background color of a select list option on hover   HTML    lt select id  select  gt       lt option value  1  gt One lt  option gt       lt option value  2  gt Two lt  option gt       lt option value  3  gt Three lt  option gt   lt  select gt    I have tried  option hover   background-color  red     but it is of no use  Does anybody know how to do this

User · Answer

This way we can do this with minimal changes :)

_x000D_

<html>

<head>
  <style>
    option:hover {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

</body>

</html>

_x000D_

User · Answer

This can be done by implementing an inset box shadow  eg    select decorated option hover       box-shadow  0 0 10px 100px  1882A8 inset      Here   decorated is a class assigned to the select box   Hope you got the point

User · Answer

In FF also CSS filter works fine  E g  hue-rotate   option       filter  hue-rotate 90deg       https   jsfiddle net w3a740jq 4

User · Answer

The problem is that even JavaScript does not see the option element being hovered  This is just to put emphasis on how it s not going to be solved  any time soon at least  by using just CSS   window onmouseover   function e     console log e target nodeName       The only way to resolve this issue  besides waiting a millennia for browser vendors to fix bugs  let alone one that afflicts what you re trying to do  is to replace the drop-down menu with your own HTML XML using JavaScript  This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element

User · Answer

I realise this is an older question  but I recently came across this need and came up with the following solution using jQuery and CSS   jQuery  select name   lstDestinations   option   hover          function                 jQuery this  addClass  highlight               function                 jQuery this  removeClass  highlight                       and the css    highlight       background-color  333      cursor pointer      Perhaps this helps someone else

User · Answer

Implementing an inset box shadow CSS works on Firefox     select option checked  select option hover       box-shadow  0 0 10px 100px  000 inset      Checked option item works in Chrome   select focus  gt  option checked        background   000  important      There is test on https   codepen io egle pen zzOKLe  For me this is working on Google Chrome Version 76 0 3809 100  Official Build   64-bit   Newest article I have found about this issue by Chris Coyier  Oct 28  2019  https   css-tricks com the-current-state-of-styling-selects-in-2019

User · Answer

this is what you need  the child combinator       select gt option hover               color   1B517E          cursor  pointer          Try it  works perfect   Here s the reference  http   www w3schools com css css combinators asp

User · Answer

Select   Option elements are rendered by the OS  not HTML  You cannot change the style for these elements

[html] Change Select List Option background colour on hover

Examples related to html

Examples related to css

Examples related to drop-down-menu