我的按钮都有一个高亮后,我点击他们。这是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:focus {box-shadow: none}不适合你,可能会有一些库添加边界,就像我的例子中使用的伪选择器::after。
所以我用以下解决方案删除了显示在焦点上的边界:
button:focus::after {
outline: none;
box-shadow: none;
}
其他回答
我也注意到了同样的情况,尽管这真的让我很恼火,但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案,因为它们完全杀死了按钮的可访问性,所以现在,当你点击按钮时,你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
这对我来说是可行的,另一个没有提到的解决方案。只要把它扔在点击事件…
$(this).trigger("blur");
或者从另一个事件/方法调用它…
$(".btn_name").trigger("blur");
真不敢相信居然没人贴出来。
使用标签而不是按钮。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
小提琴
虽然这里提供的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,也用于其他控件,所以如果你想使用它们和/或这个特定的变量不适合你,可能需要更多的研究。
如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器),则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:
*:-webkit-focus-ring {
outline: none;
}
Chrome就是这样一个webkit浏览器,这种效果也会发生在Linux上(不仅仅是macOS的事情,尽管一些Chrome风格只适用于macOS)