html - 选择选项后更改选择标签事件/焦点颜色

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 标签，这将解决问题。

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>