How to change select options hover background color using only css?

Question

I need to change select options hover background color using only css.

Please check the link : https://jsfiddle.net/bilashcse/k2o783rp/

My code :

HTML :

<div>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

CSS :

select {
   margin: 50px;
    border: 1px solid #111;
   background: transparent;
   width: 150px;
   padding: 5px 35px 5px 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
    background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
} 
select option:hover{
  background:red !important;
}

Possible duplicate of http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover — Sumit, Jan 03 '16 at 07:54
Do you want to make the whole red like this?: https://jsfiddle.net/k2o783rp/1/ — Andrew Adam, Jan 03 '16 at 08:01

score 6 · Answer 1 · answered Feb 05 '20 at 09:43

We can do this with minimal changes.

    <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>`

TimothePearce · Answer 2 · 2019-08-14T09:58:56.913

4

It's not easy to change the style of <option> elements. They are rendered by your OS and partially by your CSS code.

The only option is to uses the 'box-shadow' CSS property, but keep in mind that you must adapt it for each OS.

edited Aug 14 '19 at 09:58

answered Jan 03 '16 at 18:12

TimothePearce

1,128
1
11
22

score 0 · Answer 3 · answered Nov 01 '21 at 16:26

Ref

.blue:hover {background: blue;}

.green:hover {background: green;}

.red:hover {background: red;}

<select onfocus='this.size=3;' onblur='this.size=0;' 
            onchange='this.size=1; this.blur();'>
<option class="blue" >blue background</option>
<option class="green" >green background</option>
<option class="red" >red background</option>
</select>

How to change select options hover background color using only css?

3 Answers3

Linked