【问题标题】: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 中悬停时更改背景颜色

【问题讨论】:

标签: html css google-chrome select onhover


【解决方案1】:

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

option元素的主要属性是value,这就是为什么&lt;option&gt;里面的文本不需要添加CSS

您只能在 &lt;select&gt; 上应用 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 是黄色的。
    猜你喜欢
    • 2012-05-16
    • 2013-07-18
    • 2023-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多