css - Bootstrap : remove blue (or whatever color) outline from a focused element

Question

我知道这个问题已经被问过多次，但大多数答案似乎对一半的人都有效。我处于这不起作用的一半。您可以在 https://jsfiddle.net/erbnzud1/2/ 查看该元素. 我需要的是让那个蓝色轮廓不显示在焦点上，所以在单击按钮之后。正如您在 CSS 中所见，我尝试了如下操作:

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

以及许多其他变体。如果您有任何建议，请告诉我。

谢谢!

编辑:这是当前有效的解决方案:https://jsfiddle.net/erbnzud1/3/

创建了这个 css 类，根据我在问题答案中获得的帮助将其添加到我的元素中:

.noFocus,.noFocus:focus,.noFocus:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

Answer 1

它是标签轮廓(方形的)。将 label 添加到您的 css 规则以删除轮廓:

label, .btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}