Question

我需要仅使用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;
}

Answer 1

改变<option>元素的风格并不容易。它们由您的操作系统呈现，而不是由任何HTMl或CSS代码呈现。

唯一的选择是在CSS中使用'box-shadow'，但请记住，您必须为每个操作系统调整它！

Answer 2

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

    <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悬停背景颜色？

2 个答案: