我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
当前回答
.btn:focus:active {
outline: none;
}
这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)
其他回答
我的理解是，焦点首先应用在onMouseDown事件之后，所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案，取决于你的需求。这当然是一个可访问性友好的解决方案，但显然它调整了鼠标点击的行为，这可能与您的web项目不兼容。
我目前正在使用这个解决方案(在一个反应引导项目中)，我没有收到一个焦点闪烁或按钮点击后保留的焦点，但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。
.btn:focus:active {
outline: none;
}
这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)
I found the same situation using a submit button in a form using a bootstrap (v4.4.1) class. The problem arose as I was building a single-page user interface using JavaScript to manipulate all the required changes to the DOM. The form data was submitted to the server via 'fetch' using a JSON string rather than a HTTP POST request. Note that usually the form's default behaviour is to reload the document, and normally this would refresh the button, however the form's default behaviour was prevented by using e.preventDefault() in the listener function for the form's submit event (it is a single-page UI so the document is never reloaded and traffic to the server is minimised to data only). Given the document was not reloaded the button appeared to stay depressed until the user clicked elsewhere in the window. This is what I had (with the problem):
<输入类型=“submit”类=“btn btn-primary”>
这是我用来解决按钮一直按下的问题:
<input type=“submit” class=“btn btn-primary” onmouseup=“this.blur（）”>
直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..
尝试的例子..
<button style="border: transparent;">
<button style="border: 1px solid black;">
. .等。这取决于你想要的效果。
我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案，因为它们完全杀死了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
