我的按钮都有一个高亮后,我点击他们。这是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的样式。
其他回答
我找到了一个解决方案,只需在css代码中添加以下行。
button:focus { outline: none }
如果button:focus {box-shadow: none}不适合你,可能会有一些库添加边界,就像我的例子中使用的伪选择器::after。
所以我用以下解决方案删除了显示在焦点上的边界:
button:focus::after {
outline: none;
box-shadow: none;
}
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
对于任何使用react-bootstrap并遇到此问题的人,以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前,事情并没有工作。
如果以上方法对你不起作用,试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的,这可能是针对MacOS和Chrome的。