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

【问题标题】：Html 5 Select List Option change background color on hover in chromeHtml 5选择列表选项在chrome中悬停时更改背景颜色
【发布时间】：2020-01-14 23:11:40
【问题描述】：

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

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>

我希望在 chrome 中悬停时更改背景颜色

【问题讨论】：

How to change select options hover background color using only css?的可能重复
也是stackoverflow.com/questions/10484053/…的副本
Change Select List Option background colour on hover的可能重复

标签： html css google-chrome select onhover

【解决方案1】：

您无法更改<option> 的background，您无法在option 元素中设置脚本或样式。这用于仅显示选项元素内的文本，无论文本、样式或脚本是什么

option元素的主要属性是value，这就是为什么<option>里面的文本不需要添加CSS

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

select {
background: #ffea00;
}

【讨论】：

【解决方案2】：

以下代码将对您有所帮助。运行代码片段。

.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>
 </select>

【讨论】：

嗨@wazz，他想更改悬停事件选项的背景颜色，这在我的代码中有效。有什么问题吗？请解释一下。
在 chrome 或 sn-p 中不起作用。你怎么能说它有效？
嗨@wazz，它在我的 chrome 浏览器上运行，请稍等，我附上屏幕截图。 :)
嗨@wazz，请检查，如果我的输出有任何问题，请告诉我。 :)
图像中的悬停是蓝色的。 CSS 是黄色的。