真不敢相信居然没人贴出来。

使用标签而不是按钮。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

小提琴

如果你不想要按钮的轮廓和所有的状态，你可以用下面的代码覆盖css

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}

对于任何使用react-bootstrap并遇到此问题的人，以下是我所做的工作:

.btn:focus {
    /* the !important is really the key here, it overrides everything else */
    outline: none !important;
    box-shadow: none !important;
}

在添加!之前，事情并没有工作。

你想要的是:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。

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（）”>

.btn:focus:active {
  outline: none;
}

这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)