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>

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

标签： htmlcssinternet-explorer-11

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>