在hover上更改select列表选项背景颜色

是否有可能更改hoverselect列表选项的默认背景颜色？

HTML：

<select id="select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> 

我试过option:hover { background-color: red; } option:hover { background-color: red; } ，但它是没有用的。 有谁知道如何做到这一点？

Answer 1

这可以通过实现一个插入框阴影来完成。 例如：

 select.decorated option:hover { box-shadow: 0 0 10px 100px #1882A8 inset; } 

在这里， .decorated是一个分配给select框的类。

希望你明白了。

Answer 2

select/选项元素由操作系统呈现，而不是HTML。 你不能改变这些元素的风格。

Answer 3

实现一个embedded框阴影CSS在Firefox上工作：

 select option:checked, select option:hover { box-shadow: 0 0 10px 100px #000 inset; } 

检查选项在Chrome中可用：

 select:focus > option:checked { background: #000 !important; } 

Answer 4

在FF也CSSfilter工作正常。 如色相旋转：

 option { filter: hue-rotate(90deg); } 

https://jsfiddle.net/w3a740jq/4/

Answer 5

我意识到这是一个老问题，但我最近遇到了这个需求，并提出了以下解决scheme使用jQuery和CSS：

 jQuery('select[name*="lstDestinations"] option').hover( function() { jQuery(this).addClass('highlight'); }, function() { jQuery(this).removeClass('highlight'); } ); 

和CSS：

 .highlight { background-color:#333; cursor:pointer; } 

也许这有助于别人。

Answer 6

这是你需要的，子组合器：

  select>option:hover { color: #1B517E; cursor: pointer; } 

尝试一下，完美的作品。

这是参考： http : //www.w3schools.com/css/css_combinators.asp