如何更改鼠标 hover 上 select 标签下的选项颜色？

Question

嗨，我参考了很多网站，但我找到了解决方案，我们如何更改 hover 上的选项背景颜色，默认情况下它是蓝色的，但我想将颜色更改为绿色。 请参阅下面的屏幕截图，以便更清楚地了解我的要求。

我尝试使用这个 css 代码，但它没有任何效果：option:hover{background:green;}

Answer 1

Select 选项表单元素设计无法使用 CSS 进行更新。 如果您不在表单中使用它，我建议您将自定义下拉菜单与来自 javascript 的监听器一起使用 -

<div class="dropdown-wrap" id="dropdown-wrap">
    <div class="dropdown-head pointerCursor" id="dropdown-head">
        <span class="sel-option" id="sel-option">DIsplay header</span>
    </div>

    <ul class="list-ul pointerCursor hide" id="list-ul">
        <li class="list-li" data-val="1">1</li>
        <li class="list-li" data-val="2">2</li>
        <li class="list-li" data-val="3">3</li>
    </ul>
</div>

至少添加 2 个事件侦听器 -

document.getElementById('dropdown-head').addEventListener('click', (e) => this.showTeamsList(e));

document.getElementById('dropdown-wrap').addEventListener('mouseleave', (e) => this.hideTeamsList(e));

添加事件侦听器函数从 list-ul 添加和删除隐藏 class。 对于隐藏 class 您可以简单地使用 max-height 属性作为 -

.hide {
    max-height: 0 !important;
}

和溢出：list-ul 的 css 属性中的隐藏属性。