我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
我在另一个页面上找到了这个问题和回答，覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。
.btn:focus {
outline: none;
box-shadow: none;
}
请注意，这对可访问性有影响，除非你的按钮和输入有一个良好的一致的焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。
如果以上方法对你不起作用，试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的，这可能是针对MacOS和Chrome的。
我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案，因为它们完全杀死了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。
虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。
另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。
那么，我们能做什么呢?我想到了几个选择。
1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})
您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。
2) CSS: .btn:hover {outline: 0 !important}
在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。
我在上面的评论中提到了这一点，但为了清晰起见，有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点，你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面，并且您将无法选择按钮，但这在所有应用程序中都不是问题。
风格
.not-focusable:focus {
outline: none;
box-shadow: none;
}
使用
<button class="btn btn-primary not-focusable">My Button</button>
如果你使用规则:focus {outline: none;}来删除轮廓，则该链接或控件将是可聚焦的，但对于键盘用户没有焦点指示。使用onfocus="blur()"这样的JS删除它的方法更糟糕，会导致键盘用户无法与控件交互。
你可以使用的一些技巧，包括添加:focus {outline: none;}规则，并在检测到键盘交互时再次删除它们。林赛·埃文斯为此做了一个lib: https://github.com/lindsayevans/outline.js
但我更喜欢在html或body标签上设置一个类。并在CSS文件中控制何时使用它。
例如(内联事件处理程序仅用于演示目的):
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>
我确实整理了一个Pen: http://codepen.io/snobojohan/pen/RWXXmp
但要注意存在性能问题。这将强制用户每次在鼠标和键盘之间切换时重新绘制。更多关于避免不必要的油漆http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
真不敢相信居然没人贴出来。
使用标签而不是按钮。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
小提琴
我们遇到了类似的问题，并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格，让浏览器决定什么是最好的，Chrome似乎做了你想要的:显示大纲时，聚焦，除非你只是点击元素。
对大纲样式的支持很难确定，因为浏览器要决定它的含义。最好检查几个浏览器，并有一个回退规则。
我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器，您可以通过在操作之后调用.blur()来解决这个问题。
例子:
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
不过，如果您还没有使用事件侦听器，添加一个事件侦听器来解决这个问题可能会增加不必要的开销，像前面的回答提供的样式解决方案会更好。
另一种可能的解决方案是在用户单击按钮时使用Javascript侦听器添加类，然后使用另一个侦听器集中删除该类。这保持了可访问性(可见的标签)，同时也防止了Chrome的奇怪行为，认为一个按钮在点击时集中。
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});
CSS:
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}
完整的例子: https://jsfiddle.net/4bbb37fh/
我的理解是，焦点首先应用在onMouseDown事件之后，所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案，取决于你的需求。这当然是一个可访问性友好的解决方案，但显然它调整了鼠标点击的行为，这可能与您的web项目不兼容。
我目前正在使用这个解决方案(在一个反应引导项目中)，我没有收到一个焦点闪烁或按钮点击后保留的焦点，但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。
尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。
Try
button:focus{
outline:0px;
}
如果不工作，然后使用下面。
button:focus{
outline:none !important;
}
迟到了，但谁知道这也许能帮到谁呢。 CSS看起来像这样:
.rhighlight{
outline: none !important;
box-shadow:none
}
HTML看起来像这样:
<button type="button" class="btn btn-primary rHighlight">Text</button>
这样你就可以保留btn和它相关的行为。
如果你不想要按钮的轮廓和所有的状态，你可以用下面的代码覆盖css
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
outline: none;
}
这对我来说是可行的，另一个没有提到的解决方案。只要把它扔在点击事件…
$(this).trigger("blur");
或者从另一个事件/方法调用它…
$(".btn_name").trigger("blur");
这对我很管用。 我创建了一个自定义类，覆盖必要的CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow适用于Chrome和safari浏览器。
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个大纲:没有将工作的按钮和标签
可以设置tabIndex="-1"。它将使浏览器跳过此按钮时，你通过标签可聚焦控件。
其他“修复”建议这里，只删除焦点轮廓，但仍然留下按钮表。然而，从可用性的角度来看，你已经删除了辉光，所以你的用户不会知道当前聚焦的按钮是什么。
另一方面，使按钮非表格有可访问性的影响。
我用它来删除自举模式中的X按钮的焦点轮廓，在底部有重复的“关闭”按钮，所以我的解决方案对可访问性没有影响。
如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器)，则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:
*:-webkit-focus-ring {
outline: none;
}
Chrome就是这样一个webkit浏览器，这种效果也会发生在Linux上(不仅仅是macOS的事情，尽管一些Chrome风格只适用于macOS)
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。
这样效果最好
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
我找到了解决办法。 当我们聚焦时，bootstrap使用box-shadow，所以我们只是禁用它(声誉不够，无法上传图像:)。
我添加
.btn:focus{
box-shadow:none !important;
}
它的工作原理。
在CSS中添加这个:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略
将此添加到脚本中
$(document).ready(function() {
$('#addBtn').focus(function() {
this.blur();
});
});
我有同样的问题使用<a>作为按钮，我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。
<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >
直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..
尝试的例子..
<button style="border: transparent;">
<button style="border: 1px solid black;">
. .等。这取决于你想要的效果。
对于sass用户，引导4应该通过重写变量来操作。
如果你想禁用按钮周围焦点上的框影:
$btn-focus-box-shadow: none;
你也可以禁用输入周围焦点上的框影:
$input-focus-box-shadow: none;
或者两者都有一个变量:
$input-btn-focus-box-shadow: none;
我没有找到不破坏易用性或颠覆功能的可靠答案。
也许结合一些会更好地发挥整体作用。
<h1
onmousedown="this.style.outline='none';"
onclick="this.blur(); runFn(this);"
onmouseup="this.style.outline=null;"
>Hello</h1>
function runFn(thisElem){控制台.log(“你好”，thisElem);的
使用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/
这里有两种可能的解决方案。
1.） 按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}
2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}
这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范，它删除突出显示的部分周围。
有点核，但这是我在Angular 9上工作的简单方法。使用与因果关系，因为它影响每个html元素。
*:focus {
outline: 0 !important;
}
虽然这里提供的CSS解决方案有效，
对于任何喜欢使用Bootstrap 4方式的人，就像官方Bootstrap主题指南中建议的那样， 这应该会有帮助:
按你们的习惯。SCSS文件(参见上面的指南^)，其中您添加了您的变量覆盖，添加以下变量来删除按钮的盒子阴影:
// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;
// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";
这对我很有用。
请注意，在bootstrap的变量文件中有许多变量用于box-shadow，也用于其他控件，所以如果你想使用它们和/或这个特定的变量不适合你，可能需要更多的研究。
与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>
如果你想在鼠标下而不是键盘标签上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:
<button @mousedown="$event.preventDefault()">No Online On Click</button>
这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。
对于任何使用react-bootstrap并遇到此问题的人，以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前，事情并没有工作。
我很好奇为什么有人想要删除轮廓。就像许多人提到的，如果你删除大纲，就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”设计，但是，你可以用CSS改变颜色:
outline-color: your color hex here;
另一种编辑方法是在焦点上添加边框。
如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的例子中使用的伪选择器::after。
所以我用以下解决方案删除了显示在焦点上的边界:
button:focus::after {
outline: none;
box-shadow: none;
}
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（）”>
