删除主按钮周围的轮廓

Question

我尝试覆盖Bootstrap样式，所有工作都很完美。但我注意到当用户按下主按钮时

<button class="btn btn-primary">Test</button>

它显示蓝色轮廓，我无法将其删除。我试图覆盖一个类：

.btn:focus {
  outline: none;
}

但它不起作用。它仍然显示这个蓝色轮廓。我无法找到它宣布的地方，因为我是CSS中的noobie

P.S。如果它可以帮助我使用Chrome浏览器v.56。

Answer 1

不是最好的方法，但请尝试！重要。

我猜你的引导样式是在你的其他样式之后加载的，所以你会被覆盖。

编辑：还考虑使用更精确的选择器是一种更好的方法（参见评论） 还要检查this

Answer 2

有一些方法可以实现这一目标。这些方式旨在提升选择者的特异性。最简单的方法是使用!important作为css规则：

.btn:focus { outline: none !important; }

Answer 3

尝试一下：

为我工作。这是盒子的影子

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: unset !important;
}