选择选项后更改选择标签活动/焦点颜色

Question

我正在尝试自定义 SELECT 标记以匹配我的网站主题（黑色/深色）

我成功匹配了所有颜色，但是这种烦人的蓝色选择毁了一切。

我做错了什么？我错过了什么吗？我在 IE11 上运行这个网站，这是我工作的代码 sn-p。

select.anima {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: black;
    height: 35px;
    width: 30%;
    color: white;
    padding: 2.5px;
}

select.anima::-ms-expand {
    display: none;
}

select.anima option:hover {
    background: #2B2B2B;
    color: white;
}

select.anima option:checked {
    background: #2B2B2B !important;
    color: white;
}

<select class="anima">
    <option>123</option>
    <option>qwe</option>
    <option>asd</option>
    <option>zxc</option>
</select>

是否可以覆盖这个东西？我只是网络开发的新手，非常感谢任何帮助:)

Answer 1

您可以将:focus 用于您的选择标签，这将解决问题。

select.anima {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: black;
    height: 35px;
    width: 30%;
    color: white;
    padding: 2.5px;
}

select.anima::-ms-expand {
    display: none;
}

select.anima option:hover, select.anima option {
    background: #2B2B2B;
    color: white;
}

select.anima option:checked {
    background: #2B2B2B !important;
    color: white;
}

select.anima:focus{
    background: red !important;
    color: white;
}

<select class="anima">
    <option>123</option>
    <option>qwe</option>
    <option>asd</option>
    <option>zxc</option>
</select>