如何防止navbar品牌周围的虚线矩形

Question

我使用bootstrap并拥有像这样的导航栏链接

<a class="navbar-brand" href="#"><img id="logo" src="img/logo.png"> My Site</a>

我有自定义css

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
    color: rgba(255,0,0,0.85);
}

我无法遵循：

• 在任何浏览器上，单击时将链接重置为原始状态。文本的颜色仍然是悬停规范的颜色。我需要重置为原始状态。

• 仅在FIREFOX上，点击时.navbar-brand周围有一个虚线矩形。它不在CHROME，SAFARI上。

你能指点一下吗？

Answer 1

这是一个显示元素聚焦的大纲。它由此规则设定：

a:focus {
    outline: thin dotted;
    outline-offset: -2px;
}

您可以通过添加以下规则来更改它：

a:focus {
    outline: none;
}

Answer 2

请试一试。

a:focus {
    outline: none !important;

}