我的按钮都有一个高亮后,我点击他们。这是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;
}
其他回答
我有同样的问题使用<a>作为按钮,我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。
<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >
真不敢相信居然没人贴出来。
使用标签而不是按钮。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
小提琴
我在上面的评论中提到了这一点,但为了清晰起见,有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点,你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面,并且您将无法选择按钮,但这在所有应用程序中都不是问题。
在CSS中添加这个:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
如果以上方法对你不起作用,试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的,这可能是针对MacOS和Chrome的。