我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
当前回答
与TS溶液反应
const btnRef = useRef<HTMLButtonElement | null>(null);
const handleOnMouseUp = () => {
btnRef.current?.blur();
};
<button
ref={btnRef}
onClick={handleOnClick}
onMouseUp={handleOnMouseUp}
>
<span className="icon-plus"></span> Add Page
</button>
其他回答
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。
直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..
尝试的例子..
<button style="border: transparent;">
<button style="border: 1px solid black;">
. .等。这取决于你想要的效果。
如果你想在鼠标下而不是键盘标签上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:
<button @mousedown="$event.preventDefault()">No Online On Click</button>
这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。
如果以上方法对你不起作用，试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的，这可能是针对MacOS和Chrome的。
对于sass用户，引导4应该通过重写变量来操作。
如果你想禁用按钮周围焦点上的框影:
$btn-focus-box-shadow: none;
你也可以禁用输入周围焦点上的框影:
$input-focus-box-shadow: none;
或者两者都有一个变量:
$input-btn-focus-box-shadow: none;
