风格

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

使用

<button class="btn btn-primary not-focusable">My Button</button>

我们遇到了类似的问题，并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格，让浏览器决定什么是最好的，Chrome似乎做了你想要的:显示大纲时，聚焦，除非你只是点击元素。

对大纲样式的支持很难确定，因为浏览器要决定它的含义。最好检查几个浏览器，并有一个回退规则。

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

我找到了解决办法。 当我们聚焦时，bootstrap使用box-shadow，所以我们只是禁用它(声誉不够，无法上传图像:)。

我添加

.btn:focus{
    box-shadow:none !important;
}

它的工作原理。

与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>

使用focus-visible

注1:在下面列出的3个选项中，每个按钮的行为都是相同的(点击时没有焦点环)，但选择和输入的默认行为略有不同。只有选项3移除按钮、输入和选择周围的焦点环。请比较所有的方法，并确保您理解其中的含义。

注2:由于CSS的级联特性，CSS规则的顺序很重要。

注3:任何焦点可见方法都存在一些可访问性问题。也就是说，在浏览器公开一个配置让用户选择何时显示可见的焦点环之前，焦点-可见应该被认为在可访问性方面比一直在任何地方使用焦点环更差，但比在这个问题的其他答案中提到的有害的:focus {outline:none}方法要好。更多细节请参见答案底部的“关于可访问性的说明”部分。

选项1:使用:focus-visible伪类

focus-visible伪类可用于为非通过键盘(即通过触摸或鼠标点击)导航的用户删除按钮和各种元素上的轮廓和焦点环。

警告:截至2021年，:focus-visible伪类在现代浏览器中得到广泛支持，但在边缘浏览器中失败**。如果旧浏览器的支持很重要，下面选项2中的Javascript填充是最接近的。

/** * Remove focus styles for non-keyboard focus. */ :focus:not(:focus-visible) { outline: 0; box-shadow: none; } /** * Cross-browser styles for explicit focus via * keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus, .focus-visible:focus:not(:focus-visible) { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea>

选项2:使用.focus-visible polyfill

这个解决方案使用了一个普通的CSS类，而不是上面提到的伪类，并且有更广泛的浏览器支持(在2021年)。它需要1或2个javascript脚本添加到您的HTML;一个用于官方的焦点可见的polyfill，另一个用于不支持classList的旧浏览器。

注意:在Chrome中，polyfill似乎对待选择不同于原生的:焦点可见伪类。

/** * Cross-browser focus ring for explicit focus * via keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } /** * Remove focus ring for non-explicit scenarios. */ :focus:not(.focus-visible) { outline: 0; box-shadow: none; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea> <!-- place this code just before the closing </html> tag --> <script src="https://cdn.polyfill.io/v2/polyfill.js? features=Element.prototype.classList"></script> <script src="https://unpkg.com/focus-visible"></script>

选项3:使用全局键导航和鼠标导航状态

一个反解决方案的焦点可见，是禁用轮廓在鼠标移动，并使他们在keydown -> "Tab"。在这种情况下，您必须指定哪些元素应该显示大纲，而不是指定哪些元素不应该显示大纲。

document.addEventListener("mousemove", () => document.body.classList.remove("focus-visible") ); document.addEventListener("keydown", ({key}) => (key === "Tab") && document.body.classList.add("focus-visible") ); /** * Cross-browser focus ring for explicit focus * via keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } /** * Remove focus ring for non-explicit scenarios. */ body:not(.focus-visible) :focus:not(.focus-visible) { outline: 0 !important; box-shadow: none !important; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea>

关于可访问性的说明

删除所有焦点环la:focus {outline: none;}或:焦点{大纲:0;}是一个已知的可访问性问题，永远不建议使用。此外，在可访问性社区中，有些人希望你永远不要删除焦点环轮廓，而是让所有内容都具有:focus样式——如果样式适当，轮廓或框影都可以有效。

Finally, some folks in the accessibility community believe developers should not implement :focus-visible on their websites until all browsers implement and expose a user preference which lets people pick whether all items should be focusable or not. I personally don't subscribe to this thinking, which is why I provided this solution that I feel is far better than the harmful :focus { outline:none }. I think :focus-visible is a happy medium between design concerns and accessibility concerns. As of 2022, Chrome browser has exposed a user preference to set focus visibility styles, but FireFox has not.

资源:

https://css-tricks.com/keyboard-only-focus-styles/

演示:

https://wicg.github.io/focus-visible/demo/