我的按钮都有一个高亮后,我点击他们。这是Chrome。

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

我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?


当前回答

我的理解是,焦点首先应用在onMouseDown事件之后,所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案,取决于你的需求。这当然是一个可访问性友好的解决方案,但显然它调整了鼠标点击的行为,这可能与您的web项目不兼容。

我目前正在使用这个解决方案(在一个反应引导项目中),我没有收到一个焦点闪烁或按钮点击后保留的焦点,但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。

其他回答

我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

.btn:focus {
  outline: none;
  box-shadow: none;
}

请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。

在CSS中添加这个:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

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

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

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

您可以使用按钮的焦点事件。 这适用于angular的情况

<button (focus)=false >Click</button

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()”>