CSS 单击时引导程序按钮显示蓝色轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23333231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap button shows blue outline when clicked
提问by user3522457
I added this but still the blue outline appear when the button is clicked.
我添加了这个，但点击按钮时仍然出现蓝色轮廓。
.btn:focus {
outline: none;
}
how to remove that ugly thingy?
如何删除那个丑陋的东西？
回答by Janak
May be your properties are getting overridden.
Try attaching !importantto your code along with the :active .
可能是你的属性被覆盖了。尝试将!important:active附加到您的代码。
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
Also add box-shadow because otherwise you will still see the shadow around button.
还要添加 box-shadow 因为否则你仍然会看到按钮周围的阴影。
回答by Chang
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:
在最新版本的 Bootstrap 中，我发现删除大纲本身不起作用。我必须添加这个，因为还有一个框阴影：
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
回答by Rinat
There are built-in boostrap class shadow-nonefor disabling box-shadow(not outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/). This removes shadow of button:
有shadow-none用于禁用box-shadow（非outline）的内置 boostrap 类（https://getbootstrap.com/docs/4.1/utilities/shadows/）。这将删除按钮的阴影：
<button class='btn btn-primary shadow-none'>Example button</button>
回答by Sandy
Try Below Code
试试下面的代码
.button:active,
button:active,
.button:focus,
button:focus,
.button:hover,
button:hover{
border:none !important;
outline:none !important;
}
回答by barburakka
This was happening to me in Chrome (though not in Firefox). I've found out that the outlineproperty was being set by Bootstrap as outline: 5px auto -webkit-focus-ring-color;. Solved by overriding the outlineproperty later in my custom CSS as follows:
这在 Chrome 中发生在我身上（虽然不是在 Firefox 中）。我发现该outline属性被 Bootstrap 设置为outline: 5px auto -webkit-focus-ring-color;. 通过outline稍后在我的自定义 CSS 中覆盖该属性来解决，如下所示：
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 0;
}
回答by Eddy
this will solve button with a text, button only a icon or a button is a link:
这将解决带有文本的按钮，按钮只有图标或按钮是链接：
<!--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;
}
if you add border:none !important;
如果你添加 border:none !important;
{
border:none !important;
outline:none !important;
}
then the button will become smaller size when clicked.
然后单击时按钮将变小。
回答by Subodh Sharma
Try this
尝试这个
.btn
{
box-shadow: none;
outline: none;
}
回答by Slobodan Kovacevic
In Bootstrap 4 they use
box-shadow: 0 0 0 0px rgba(0,123,255,0);on :focus, si i solved my problem with
在 Bootstrap 4 中，他们使用
box-shadow: 0 0 0 0px rgba(0,123,255,0);:focus, si 我解决了我的问题
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);
}
回答by Tsurule Vol
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:
$input-btn-focus-box-shadow: none;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:
实际上在 bootstrap 中定义了所有情况下的所有变量。在您的情况下，您只需要覆盖“_variables.scss”文件中的默认变量“$input-btn-focus-box-shadow”。像这样：
$input-btn-focus-box-shadow: none;请注意，您需要在自己的自定义“_yourCusomVarsFile.scss”中覆盖该变量。该文件应该按第一顺序导入项目，然后像这样引导：
@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";
The bootstraps vars goes with flag '!default'.
引导程序变量带有标志 '!default'。
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
So in your file, you will override default values. Here the illustration:
因此，在您的文件中，您将覆盖默认值。这里的插图：
$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
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: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
这是 repo 中的“_variable.scss”文件，您可以在其中找到 bootstrap 的所有初始值：https: //github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
Chears
切尔斯
回答by Danny Cullen
I found this quite useful in my case after the button click.
单击按钮后，我发现这对我的情况非常有用。
$('#buttonId').blur();
