我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
对于任何使用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的。
我们遇到了类似的问题,并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格,让浏览器决定什么是最好的,Chrome似乎做了你想要的:显示大纲时,聚焦,除非你只是点击元素。
对大纲样式的支持很难确定,因为浏览器要决定它的含义。最好检查几个浏览器,并有一个回退规则。
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作,和奖金,它保持键盘的可访问性。最后,它被不支持焦点可见的浏览器忽略
我有同样的问题使用<a>作为按钮,我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。
<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >
如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器),则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:
*:-webkit-focus-ring {
outline: none;
}
Chrome就是这样一个webkit浏览器,这种效果也会发生在Linux上(不仅仅是macOS的事情,尽管一些Chrome风格只适用于macOS)