blocks|key|123717|text|可能您的属性正在被重写。尝试将!important与:active一起附加到您的代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|123718|.btn:focus,.btn:active+{
+++outline:+none+!important;
+++box-shadow:+none;
}|code-block|syntax|javascript|123719|另外，添加box-shadow，否则你仍然会看到按钮周围的阴影。|123720|虽然这不是一个很好的实践！重要的，我建议你使用更具体的类，然后尝试应用css与使用！重要...|123721|entityMap^0|F|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

May be your properties are getting overridden.
Try attaching <code> !important</code> to your code along with the :active .
<pre><code>.btn:focus,.btn:active {
 outline: none !important;
 box-shadow: none;
}
</code></pre>
Also add box-shadow because otherwise you will still see the shadow around button.
Although this isn't a good practise to use !important I suggest you use more specific class and then try applying the css with the use of !important...

blocks|key|123997|text|在最新版本的Bootstrap中，我发现删除outline本身并不起作用。我必须添加这个，因为还有一个长方体阴影：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123998|.btn:focus,+.btn:active+{
++outline:+none+!important;
++box-shadow:+none+!important;
}|code-block|syntax|javascript|123999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In the latest version of Bootstrap, I found removing outline itself doesn't work. And I have to add this because there is also a box-shadow:

<pre><code>.btn:focus, .btn:active {
 outline: none !important;
 box-shadow: none !important;
}
</code></pre>

blocks|key|123839|text|这发生在我的Chrome中(虽然不是在Firefox中)。我发现Bootstrap将outline属性设置为outline:+5px+auto+-webkit-focus-ring-color;。通过稍后在自定义CSS中重写outline属性来解决，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|123840|.btn.active.focus,+.btn.active:focus,+.btn.focus,+.btn:active.focus,+.btn:active:focus,+.btn:focus+{
++++outline:+0;
}|code-block|syntax|javascript|123841|entityMap^0|16|7|1I|17|34|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

This was happening to me in Chrome (though not in Firefox). I've found out that the <code>outline</code> property was being set by Bootstrap as <code>outline: 5px auto -webkit-focus-ring-color;</code>. Solved by overriding the <code>outline</code> property later in my custom CSS as follows:

<pre><code>.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
 outline: 0;
}
</code></pre>

blocks|key|123869|text|这将解决带有文本的按钮，按钮只有一个图标或按钮是一个链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123870|+
+<button+type="button"+class="btn+btn-success"+id="newWord">Save</button>

+
+<button+type="button"+class="close"></button>

+
+<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;
}|code-block|syntax|javascript|123871|如果添加border:none+!important;|offset|length|style|CODE|123872|{
++++border:none+!important;
++++outline:none+!important;
}|123873|然后，当单击按钮时，按钮将变得更小。|123874|entityMap^0|0|0|4|N|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

this will solve button with a text, button only a icon or a button is a link:

<pre><code> &lt;!--1. button with a text --&gt;
 &lt;button type="button" class="btn btn-success" id="newWord"&gt;Save&lt;/button&gt;

 &lt;!--2. button only with a close icon --&gt;
 &lt;button type="button" class="close"&gt;&lt;/button&gt;

 &lt;!--3. button is a link --&gt;
 &lt;a class="btn btn-success btn-xs" href="#"&gt;Save&lt;/a&gt;



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{ 
 outline:none !important;
}
</code></pre>

if you add <code>border:none !important;</code>

<pre><code>{
 border:none !important;
 outline:none !important;
}
</code></pre>

then the button will become smaller size when clicked.

blocks|key|124274|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124275|.btn
{
++++box-shadow:+none;
++++outline:+none;
}|code-block|syntax|javascript|124276|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this 

<pre><code>.btn
{
 box-shadow: none;
 outline: none;
}
</code></pre>

blocks|key|4630262|text|在Bootstrap+4中，他们使用box-shadow:+0+0+0+0px+rgba(0,123,255,0);+on+:focus，所以我解决了我的问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4630263|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);
}|code-block|syntax|javascript|4630264|entityMap^0|I|14|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In Bootstrap 4 they use
<code>box-shadow: 0 0 0 0px rgba(0,123,255,0);</code> on :focus, so i solved my problem with
<pre><code>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);
}
</code></pre>

blocks|key|4630566|text|所有元素(不仅仅是按钮)的SCSS方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630567|body+{
++*+{
++++&:focus,+&.focus,
++++&:active,+&.active+{
++++++outline:+transparent+none+0+!important;
++++++box-shadow:+0+0+0+0+rgba(0,123,255,0)+!important;
++++++-webkit-box-shadow:+none+!important;
++++}
++}
}|code-block|syntax|javascript|4630568|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The SCSS way for all elements (not only buttons):

<pre><code>body {
 * {
 &amp;:focus, &amp;.focus,
 &amp;:active, &amp;.active {
 outline: transparent none 0 !important;
 box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
 -webkit-box-shadow: none !important;
 }
 }
}
</code></pre>

blocks|key|4630067|text|如果有人仍然没有解决这个问题，这可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630068|​|4630069|(function()+{
++$('button').on('click',+function()+{
++++$("#action").html("button+was+clicked");
++++console.log("the+button+was+clicked");
++});
})();|code-block|syntax|javascript|4630070|.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;
}|4630071|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Action</button>

<button+class="btn-clear">Action</button>

<label+id="action"></label>|4630072|4630073|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

This may help if someone still has this question unresolved.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
 $('button').on('click', function() {
 $("#action").html("button was clicked");
 console.log("the button was clicked");
 });
})();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- this button has default style --&gt;
&lt;button&gt;Action&lt;/button&gt;
&lt;!-- this button is clear of style --&gt;
&lt;button class="btn-clear"&gt;Action&lt;/button&gt;

&lt;label id="action"&gt;&lt;/label&gt;</code></pre>
</div>
</div>

blocks|key|4630151|text|我刚刚遇到了同样的问题，下面的代码对我有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630152|​|4630153|.btn:active,+.btn:focus,+.btn:active:focus,+.btn.active:focus+{
++++outline:+none+!important;
}

.btn+{
++margin:32px;
}|code-block|syntax|javascript|4630154|
<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va%2BPmSTsz/K68vbdEjh4u"+crossorigin="anonymous">





<button+type="button"+class="btn+btn-default">Button</button>|4630155|4630156|希望它能有所帮助！|4630157|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

I just had the same issue and the following code worked for me:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
 outline: none !important;
}

.btn {
 margin:32px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
&lt;!-- Latest compiled and minified JavaScript --&gt;




&lt;button type="button" class="btn btn-default"&gt;Button&lt;/button&gt;</code></pre>
</div>
</div>


Hoping it will help!

blocks|key|123927|text|我选择简单地删除:focus上的边框宽度。这删除了轮廓和按钮圆角之间的丑陋空间。由于某些原因，这个问题只发生在实际的按钮元素上，而不是<a+class="btn">元素上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|123928|button.btn:focus+{
++border-width:+0;
}|code-block|syntax|javascript|123929|entityMap^0|8|6|1V|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

I opted to simply remove the border width on <code>:focus</code>. This removes the ugly space between the outline and the button's rounded corners. For some reason this issue only happens on actual button elements and not <code>&lt;a class="btn"&gt;</code> elements.

<pre><code>button.btn:focus {
 border-width: 0;
}
</code></pre>

blocks|key|4630089|text|有时{outline:+0}不能解决问题，我们可以尝试{box-shadow:+none;}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4630090|entityMap^0|2|C|R|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Sometimes <code>{outline: 0}</code> didn't solve the problem and we can try <code>{box-shadow: none;}</code>

blocks|key|4630183|text|下面是我的Boostrap+4解决方案，用于删除按钮轮廓|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630184|/*
*+Boostrap+4
*+Remove+blue+outline+from+button
*/

.btn:focus,
.btn:active+{
++box-shadow:+none;
}|code-block|syntax|javascript|4630185|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's my Boostrap 4 solution to remove the button outline

<pre><code>/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
 box-shadow: none;
}
</code></pre>

blocks|key|4630373|text|实际上，在bootstrap中定义了所有情况下的所有变量。在你的例子中，你只需要覆盖'_variables.scss‘文件中的默认变量'$input-btn-focus-box-shadow’。如下所示：$input-btn-focus-box-shadow:+none;注意，您需要在您自己的自定义'_yourCusomVarsFile.scss‘中覆盖该变量。文件应该首先导入到项目中，然后进行引导，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4630374|@import+"yourCusomVarsFile";
@import+"bootstrap/scss/bootstrap";
@import+"someOther";|code-block|syntax|javascript|4630375|bootstraps+var带有'!default‘标志。|4630376|$input-focus-box-shadow:+$input-btn-focus-box-shadow+!default;|4630377|因此，在您的文件中，您将覆盖默认值。下面是插图：|4630378|$input-focus-box-shadow:+none;
$input-focus-box-shadow:+$input-btn-focus-box-shadow+!default;|4630379|第一个变量比第二个变量具有更高的优先级。其余的状态和情况也是如此。希望能对你有所帮助。|4630380|下面是存储库中的'_variable.scss‘文件，您可以在其中找到bootstrap中的所有初始值：https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss|4630381|切尔斯|4630382|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss^0|2U|Y|0|0|0|0|0|0|0|1G|1U|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|W|3|X|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

Actually in bootstrap is defined all variables for all cases. In your case you just have to override default variable '$input-btn-focus-box-shadow' from '_variables.scss' file. Like so: 
<code>$input-btn-focus-box-shadow: none;</code>
Note that you need to override that variable in your own custom '_yourCusomVarsFile.scss'. And that file should be import in project in first order and then bootstrap like so:

<pre><code>@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";
</code></pre>

The bootstraps vars goes with flag '!default'.

<pre><code>$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
</code></pre>

So in your file, you will override default values.
Here the illustration: 

<pre><code>$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
</code></pre>

The very first var have more priority then second one. The same is for the rest states and cases.
Hope it will help you.

Here is '_variable.scss' file from repo, where you can find all initials values from bootstrap: <a href="https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss</a>

Chears

blocks|key|4630545|text|即使通过将其值设置为0从按钮中删除轮廓后，单击按钮时仍然会有有趣的行为，它的大小会缩小一点。所以我想出了一个最优的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630546|.btn:focus+{
+++outline:+none+!important;
+++box-shadow:+0+0+0+0;
}|code-block|syntax|javascript|4630547|希望这能帮到你。|4630548|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Even after removing the outline from the button by setting its value to 0, There is still a funny behaviour on the button when clicked, its size shrinks a bit. So i came up with an optimal solution:

<pre><code>.btn:focus {
 outline: none !important;
 box-shadow: 0 0 0 0;
}
</code></pre>

Hope this helps...

blocks|key|124582|text|如何避免单击引导程序按钮时出现边框焦点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124583|.btn-secondary:not(:disabled):not(.disabled).active:focus,+.btn-secondary:not(:disabled):not(.disabled):active:focus,+.show>.btn-secondary.dropdown-toggle:focus+{
++++box-shadow:+none;
}

.btn.focus,+.btn:focus+{
++++outline:+0;
++++box-shadow:+none;
}|code-block|syntax|javascript|124584|如何避免单击bootstrap输入字段时出现边框焦点：|124585|.form-control.focus,+.form-control:focus+{
++++outline:+0;
++++box-shadow:+none;
}|124586|如果这对你的特定情况不起作用，那么我建议你打开检查器页面，点击选择器工具(左上角一个小箭头)，点击你试图编辑的元素，然后再次点击相同的元素，并查看"Styles“选项卡，看看CSS有什么变化……搜索与“焦点”相关的内容，您应该能够检测到您必须在CSS中覆盖的代码。希望这能对你有所帮助。|124587|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

How to avoid border focus on click of bootstrap buttons:
<pre><code>.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show&gt;.btn-secondary.dropdown-toggle:focus {
 box-shadow: none;
}

.btn.focus, .btn:focus {
 outline: 0;
 box-shadow: none;
}
</code></pre>
How to avoid border focus on click of bootstrap input fields:
<pre><code>.form-control.focus, .form-control:focus {
 outline: 0;
 box-shadow: none;
}
</code></pre>
If this doesn't work for your specific case, then I suggest you to open the inspector page, click on the selector tool (small arrow in a box in the top-left corner) click on the element you are trying to edit, then click again on the same element and look at the &quot;Styles&quot; tab to see what changes in terms of CSS... search something related to &quot;focus&quot; and you should be able to detect the code you have to overwrite in your CSS. Hope this is helpful.

blocks|key|4629995|text|在点击按钮之后，我发现这在我的例子中非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4629996|$('#buttonId').blur();|code-block|syntax|javascript|4629997|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found this quite useful in my case after the button click.

<pre><code>$('#buttonId').blur();
</code></pre>

blocks|key|123944|text|a:focus+{
++outline:+none;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|123945|这对我在BS3上很有效|unstyled|123946|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>a:focus {
 outline: none;
}
</code></pre>

this works for me on BS3

blocks|key|124260|text|在Bootstrap+4中，这个方法适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124261|.btn+{border-color:+transparent;}|offset|length|style|CODE|124262|entityMap^0|0|0|X|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

This one worked for me in Bootstrap 4: 

<code>.btn {border-color: transparent;}</code>

blocks|key|124412|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124413|.btn-primary:focus+{+
++box-shadow:+none+!important;+
}|code-block|syntax|javascript|124414|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try

<pre><code>.btn-primary:focus { 
 box-shadow: none !important; 
}
</code></pre>

blocks|key|4629863|text|请记住，如果您的按钮位于锚点内，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4629864|<a+href='some_link'>
++++<button+class='btn'>Button</button>
</a>|code-block|syntax|javascript|4629865|将样式添加到按钮本身可能还不够，您可能需要在适当的地方添加a:focus,+a:active+{+outline:+none+}+CSS规则(这对我有效)。|offset|length|style|CODE|4629866|entityMap^0|0|0|T|Z|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Keep in mind, if you're button is inside of an anchor like:

<pre><code>&lt;a href='some_link'&gt;
 &lt;button class='btn'&gt;Button&lt;/button&gt;
&lt;/a&gt;
</code></pre>

Adding the style to the button itself may not be enough, you may need to add the <code>a:focus, a:active { outline: none }</code> CSS rules where appropriate (this worked for me).

blocks|key|123937|text|试试下面的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123938|.bootstrap-select+.dropdown-toggle:focus+
+{
++++++++++outline:+0+!important;
+}|code-block|syntax|javascript|123939|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try the below

<pre><code>.bootstrap-select .dropdown-toggle:focus 
 {
 outline: 0 !important;
 }
</code></pre>

blocks|key|124057|text|我使用的是bootstrap+4，你可以使用轮廓和方框阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124058|#buttonId+{
++++box-shadow:+none;
++++outline:+none;
}|code-block|syntax|javascript|124059|或者，如果按钮位于没有背景的div这样的元素中，则box-shadow就足够了。|124060|#buttonId+{
+++++box-shadow:+none;
}|124061|示例：https://codepen.io/techednelson/pen/XRwgRB|offset|length|124062|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/techednelson/pen/XRwgRB^0|0|0|0|0|3|16|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I'm using bootstrap 4, you can use outline and box-shadow.

<pre><code>#buttonId {
 box-shadow: none;
 outline: none;
}
</code></pre>

Or if the button is inside an element like a div without back-ground, box-shadow is enough.

<pre><code>#buttonId {
 box-shadow: none;
}
</code></pre>

Example: <a href="https://codepen.io/techednelson/pen/XRwgRB" rel="nofollow noreferrer">https://codepen.io/techednelson/pen/XRwgRB</a>

blocks|key|124405|text|如果您使用的是4.3或更高版本，您的代码将无法正常工作。这就是我使用的。这对我很管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124406|.btn:focus,+.btn:active+{
++++outline:+none+!important;
++++box-shadow:+none+!important;
++++-webkit-box-shadow:+none+!important;
}|code-block|syntax|javascript|124407|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are using version 4.3 or higher, your code will not work properly.
This is what I used. It worked for me.

<pre class="lang-css prettyprint-override"><code>.btn:focus, .btn:active {
 outline: none !important;
 box-shadow: none !important;
 -webkit-box-shadow: none !important;
}
</code></pre>

blocks|key|4630692|text|用于复选框和单选按钮|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630693|.form-check-input:checked+,.form-check-input:focus,.form-check-input:active+{
++outline:+none+!important;
++box-shadow:+0+0+0+0+rgba(0,123,255,0)+!important;
++++++-webkit-box-shadow:+none+!important;
}|code-block|syntax|javascript|4630694|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For Check box and radio buttons
<pre><code>.form-check-input:checked ,.form-check-input:focus,.form-check-input:active {
 outline: none !important;
 box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
 -webkit-box-shadow: none !important;
}
</code></pre>

blocks|key|4630226|text|下面是一个非CSS方法。使用JQuery，只要单击了元素，就可以简单地删除"focus“类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630227|$(".btn").mousemove(function(element)+{+++++$(this).removeClass("focus");+});|offset|length|style|CODE|4630228|这个方法可能会导致边框闪现，然后短暂地消失，在我看来这看起来并不糟糕(它看起来像是单击按钮时响应的一部分)。|4630229|我使用.mousemove()的原因是.click()和.mouseup()都被证明是无效的。|4630230|entityMap^0|0|0|25|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

Here's a non-CSS method. Using JQuery, simply remove the "focus" class whenever the element is has been clicked.

<code>$(".btn").mousemove(function(element) {
 $(this).removeClass("focus");
});</code>

This method may cause the border to flash into existence and then back out briefly, which doesn't look bad in my opinion (it looks like part of the response when the button is clicked).

The reason I used .mousemove() is that .click() and .mouseup() both proved to be ineffective.

blocks|key|124356|text|改变这些值对我很有效。我是通过查看Chrome的开发工具找到它的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124357|.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle+{
++++color:+#fff;
++++background-color:+/*Change+This*/;
++++border-color:+/*Change+This*/;
}|code-block|syntax|javascript|124358|这也保留了按钮的阴影，它只会在单击时更改按钮的颜色。|124359|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Changing these values worked for me. I found it by looking at the Developer Tools of Chrome

<pre><code>.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show&gt;.btn-primary.dropdown-toggle {
 color: #fff;
 background-color: /*Change This*/;
 border-color: /*Change This*/;
}
</code></pre>

This retains the shadow of the button too, it only changes the color of the button on-click.

blocks|key|124381|text|覆盖确切的bootstrap语句：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124382|.btn-primary.focus,+.btn-primary:focus,+.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
+box-shadow:+none;
}|code-block|syntax|javascript|124383|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Override the exact bootstrap statements:

<pre class="lang-css prettyprint-override"><code>.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show&gt;.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}
</code></pre>

blocks|key|4630517|text|将边框颜色改回灰色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630518|.btn:focus,
.btn:active{
+border:+1px+solid+#ced4da+!important;
}|code-block|syntax|javascript|4630519|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Change the Border Color back to Grey 

<pre><code>.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}
</code></pre>

blocks|key|124534|text|你可以将下面的答案添加到你的_variable.scss文件中，不需要改变其他的大纲或任何东西。我相信这一定行得通。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124535|$btn-active-box-shadow:+none+!important;|code-block|syntax|javascript|124536|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can add below answer to your _variable.scss file, no need to change the other outline or any thing. I'm sure this will work.
<pre><code>$btn-active-box-shadow: none !important;
</code></pre>

blocks|key|4630597|text|.btn:focus,.btn:active+{
+++outline:+none+!important;
+++box-shadow:+none;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4630598|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.btn:focus,.btn:active {
 outline: none !important;
 box-shadow: none;
}
</code></pre>

blocks|key|4630387|text|非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4630388|.btn+{outline:+none;}|code-block|syntax|javascript|4630389|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

very simple : 

<pre><code>.btn {outline: none;}
</code></pre>

I added this but still the blue outline appear when the button is clicked.

<pre><code>.btn:focus {
 outline: none;
}
</code></pre>

how to remove that ugly thingy?

bootstrap button shows blue outline when clicked

我添加了这个，但当单击按钮时，仍然会出现蓝色轮廓。.btn:focus {  outline: none;}如何去除那个丑陋的东西？

问单击bootstrap按钮时会显示蓝色轮廓
EN

回答 31

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击bootstrap按钮时会显示蓝色轮廓EN

回答 31

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击bootstrap按钮时会显示蓝色轮廓
EN