如何仅使用CSS更改选择选项的悬停背景颜色?

问题描述：

我需要仅使用CSS来更改选择选项，将鼠标悬停在背景颜色上.

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

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

我的代码:

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;
}

答

我们可以进行最少的更改.

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

如何仅使用CSS更改选择选项的悬停背景颜色?

相关推荐