删除CSS颜色以将焦点状态更改为当前颜色

时间:2018-07-17 12:08:01

标签: html css

我有一些anchor标签会根据分配给它们的类而获得动态颜色,但是在焦点上,它们会导致白色原因bootstrap overrides

现在,我只需要使用此类a.custom-label和另一个泛型类覆盖锚的默认引导程序样式,即可在焦点上获得原始颜色(在聚焦之前),如下所示:< / p>

a.custom-label:focus {
    color: unset;
    color: initial;
    color: revert;
    color: inherit;
    color: none;
}

我尝试了这些,但似乎没有任何效果,有人可以分享实现这一目标的方法吗?

3 个答案:

答案 0 :(得分:0)

a.custom-label:focus { color: #000 !important; }

您可以更改所需的颜色来代替#000。另外,如果您不想使用!important,则添加外部CSS,并在head块的bootstrap css下调用它。

答案 1 :(得分:0)

尝试在颜色名称后加上“!important” 例如:

a.custom-label:focus {
    color: #2d2d2d !important; }

答案 2 :(得分:0)

最好的方法是从我的HTML元素中删除默认的引导标签类,并为.label类选择引导中的所有样式,然后使用选择器.custom-label将其粘贴到我的custom.css中< strong>除了焦点样式外,是这样的:

.custom-label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

并且仅将此类用于所有元素。

这提供了所有默认的引导样式,但由于未粘贴onfocus的样式,因此问题已得到解决。