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

Question

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

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

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

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>