Html 5 选择列表选项在 chrome 悬停时更改背景颜色

Question

尝试了很多方法来更改悬停时选择选项的背景颜色，但无法这样做，请帮助我找到解决方案。

select.rangs option:hover {
 box-shadow: 0 0 10px 100px #ffea00 inset;}
option.rang:hover {
 background: #ffea00 !important;}

<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
 <option class="rang" value="">Sort By</option>
 <option class="rang" value="popular">Most popular</option>
 <option class="rang" value="register_desc">Oldest First</option>
 <option class="rang" value="register_asc">Newest First</option>

I want the background color to be changed on hover in chrome

Answer 1

您无法更改 background的 <option> , 你不能在 option 中设置脚本或样式元素。这用于仅显示选项元素内的文本，无论文本、样式或脚本如何

option 元素的主要属性是value这就是为什么不需要在 <option> 中的文本上添加 CSS 的原因。

您只能在 <select> 上应用 CSS :

select {
background: #ffea00;
}