我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示,并且不会弄乱bootstrap的样式。
其他回答
对于任何使用react-bootstrap并遇到此问题的人,以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前,事情并没有工作。
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示,并且不会弄乱bootstrap的样式。
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。
我有同样的问题使用<a>作为按钮,我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。
<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >
虽然这里提供的CSS解决方案有效,
对于任何喜欢使用Bootstrap 4方式的人,就像官方Bootstrap主题指南中建议的那样, 这应该会有帮助:
按你们的习惯。SCSS文件(参见上面的指南^),其中您添加了您的变量覆盖,添加以下变量来删除按钮的盒子阴影:
// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;
// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";
这对我很有用。
请注意,在bootstrap的变量文件中有许多变量用于box-shadow,也用于其他控件,所以如果你想使用它们和/或这个特定的变量不适合你,可能需要更多的研究。