选择选项后，更改选择标签的活动/焦点颜色 [英] Change the select tag active / focus color after selection of options

问题描述

我正在尝试自定义SELECT标签以匹配我的网站主题(黑色/深色)

I am trying to customize a SELECT tag to match my website theme (black / dark)

我成功地匹配了所有颜色，但是这种令人讨厌的蓝色选择颜色破坏了一切.

I successfully matched all the colors but this annoying blue selection color ruined everything.

我做错了什么?我想念什么吗?我正在IE11上运行此网站，这是我的工作的代码段.

What am I doing wrong? Am I missing something? I'm running this website on IE11, here's a code snippet of my work.

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>

是否可以覆盖此内容?我只是网络开发的新手，非常感谢您的帮助:)

Is it possible to override this thing? I'm just new in web-development, any help is much appreciated :)

推荐答案

您可以在选择标记中使用:focus 来解决此问题.

You can use :focus to your select tag which will solve the issue.

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>

这篇关于选择选项后，更改选择标签的活动/焦点颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！