引导button单击时显示蓝色轮廓
我添加了这个，但点击button时仍然出现蓝色轮廓。
.btn:focus { outline: none; } 如何删除丑陋的东西？
可能是你的物业越来越被覆盖。 尝试附加!important的代码以及：主动。
.btn:focus,.btn:active { outline: none !important; box-shadow: none; }
另外添加框阴影，否则你仍然会看到button周围的阴影。
Chrome中发生了这种情况（尽pipe不在Firefox中）。 我发现outline属性是由Bootstrap设置为outline: 5px auto -webkit-focus-ring-color; 。 稍后在我的自定义CSS中覆盖outline属性来解决，如下所示：
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: 0; }
这将解决button与文本，button只有一个图标或一个button是一个链接：
<!--1. button with a text --> <button type="button" class="btn btn-success" id="newWord">Save</button> <!--2. button only with a close icon --> <button type="button" class="close"></button> <!--3. button is a link --> <a class="btn btn-success btn-xs" href="#">Save</a> button, button:active, button:focus, button:hover, .btn, .btn:active, .btn:focus, .btn:hover{ outline:none !important; }
如果你添加border:none !important;
{ border:none !important; outline:none !important; }
那么点击时button将变得更小。
在最新版本的Bootstrap中，我发现删除大纲本身不起作用。 而我必须添加这个，因为还有一个box-shadow：
.btn:focus, .btn:active { outline: none !important; box-shadow: none !important; }
尝试下面的代码
button:active, .button:active, button:focus, .button:focus, button:hover, .button:hover{ border:none !important; outline:none !important; }
按下button后，我发现这在我的情况下非常有用。
$('#buttonId').blur();
我select只是删除:focus上的边框宽度。 这将删除轮廓和button的圆angular之间的丑陋空间。 出于某种原因，这个问题只发生在实际的button元素上，而不是<a class="btn">元素。
button.btn:focus { border-width: 0; }
这可能有助于如果有人仍然有这个问题没有得到解决。
(function() { $('button').on('click', function() { $("#action").html("button was clicked"); console.log("the button was clicked"); }); })();
.btn-clear { background-color: transparent !important; border-style: none !important; cursor: pointer; } .btn-clear:active, .btn-clear:focus { outline-style: none !important; outline-color: transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- this button has default style --> <button>Action</button> <!-- this button is clear of style --> <button class="btn-clear">Action</button> <label id="action"></label>
a:focus { outline: none; }
这在BS3上适用于我
这里是我的Boostrap 4解决scheme来删除button轮廓
/* * Boostrap 4 * Remove blue outline from button */ .btn:focus, .btn:active { box-shadow: none; }
我只是有同样的问题，下面的代码为我工作：
.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus { outline: none !important; } .btn { margin:32px; }
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <button type="button" class="btn btn-default">Button</button>
您需要使用适当的嵌套，然后对其应用样式。
-
右键单击button，find确切的类嵌套使用（检查元素使用firebug火狐），（检查铬元素）。
-
将样式添加到整个class级。 只有这样才行
请记住，如果你的button是在一个锚点内：
<a href='some_link'> <button class='btn'>Button</button> </a>
将样式添加到button本身可能是不够的，您可能需要添加a:focus, a:active { outline: none } CSS规则（适用于我）。
试试下面
.bootstrap-select .dropdown-toggle:focus { outline: 0 !important; }
有时{outline: 0}没有解决问题，我们可以尝试{box-shadow: none;}
我使用引导程序4，您可以使用轮廓和框阴影。
#buttonId { box-shadow: none; outline: none; }
或者，如果button在没有背景的div之类的元素内，则box-shadow就足够了。
#buttonId { box-shadow: none; }
例如： https ： //codepen.io/techednelson/pen/XRwgRB
这是一个非CSS方法。 使用JQuery，只要元素被点击，只需删除“焦点”类。
$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });
这种方法可能会导致边框闪烁，然后短暂退出，这在我看来并不坏（这看起来像点击button时响应的一部分）。
我使用.mousemove（）的原因是.click（）和.mouseup（）都被certificate是无效的。
在Bootstrap 4中，他们使用了box-shadow: 0 0 0 0px rgba(0,123,255,0); 关于：重点，我解决了我的问题
a.active.focus, a.active:focus, a.focus, a:active.focus, a:active:focus, a:focus, button.active.focus, button.active:focus, button.focus, button:active.focus, button:active:focus, button:focus, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: 0 ; outline-color: transparent ; outline-width: 0 ; outline-style: none ; box-shadow: 0 0 0 0 rgba(0,123,255,0); }
