我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
我没有找到不破坏易用性或颠覆功能的可靠答案。
也许结合一些会更好地发挥整体作用。
<h1
onmousedown="this.style.outline='none';"
onclick="this.blur(); runFn(this);"
onmouseup="this.style.outline=null;"
>Hello</h1>
function runFn(thisElem){控制台.log(“你好”,thisElem);的
其他回答
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作,和奖金,它保持键盘的可访问性。最后,它被不支持焦点可见的浏览器忽略
如果以上方法对你不起作用,试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的,这可能是针对MacOS和Chrome的。
与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>
这对我来说是可行的,另一个没有提到的解决方案。只要把它扔在点击事件…
$(this).trigger("blur");
或者从另一个事件/方法调用它…
$(".btn_name").trigger("blur");
这样效果最好
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}