我点击它们后，所有按钮都有一个亮点。这是在Chrome中。如何删除按钮上的焦点点击
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我使用的引导与主题，但我敢肯定这不是它：我是在另一个项目之前，注意到这一点。
如果我使用<a>标签而不是<button>，它将消失。为什么？如果我想用<button>，我会如何让它消失？
我在另一页上发现了这个Q和A，并且覆盖了按钮焦点风格对我有用。这个问题可能特定于Chrome浏览器的MacOS。
.btn:focus {
outline: none;
}
但请注意，这对可访问性的意义，是不明智的，直到你有一个很好的一致聚焦状态的按钮和输入。根据下面的评论，有些用户不能使用鼠标。
我也想到了这一点，但不删除大纲有无障碍问题？ – silvenon
我想我们没有别的选择。您还可以添加'.btn：active：focus'选择器以将其从活动状态中删除。 – silvenon
从按钮中删除轮廓绝对不利于可访问性。有些用户无法控制鼠标，需要能够通过键盘浏览页面。去除轮廓使其非常困难。最好防止点击时按钮焦点。 – splodingsocks
如果上述方法不适合你，试试这个：
.btn：重点{大纲：无框阴影：无;边界：2px的固体 透明;}
正如user1933897指出的那样，这可能是特定于Chrome浏览器的MacOS。
我注意到了相同的，即使它真的让我很烦，我相信没有正确的方法来处理这个问题。
我会建议所有其他解决方案，因为他们完全杀死按钮的可访问性，所以现在，当你选择按钮，你不会得到预期的重点。
这应该避免！
.btn:focus {
outline: none;
}
我不认为这是错误的，因为在聚焦时，按钮上的闪电仍然略有不同，所以即使键盘用户仍然可以识别。但是这还不够，因为当你按住鼠标左键时，你仍然会看到边框。 – apocalypz
虽然它很容易只是删除大纲全部集中按钮（如user1933897的answer），但这种解决方案是从视可达点差（例如，见Stop Messing with the Browser's Default Focus outline）
在另一方面，它的可能无法说服您的浏览器停止将点击的按钮设置为关注点，如果它认为它在您点击它之后关注它（我在看着你，Chrome OS在OS X上）。
那么，我们该怎么办？我想起了一些选项。
1）使用Javascript（jQuery的）：单击该按钮$('.btn').mouseup(function() { this.blur() })
您可指示浏览器删除焦点周围的任何按钮之后。通过使用mouseup而不是click我们保持基于键盘的交互的默认行为（mouseup不会被键盘触发）。
2）CSS：.btn:hover { outline: 0 !important }
在这里，您可以关闭轮廓为仅按钮徘徊。显然这并不理想，但在某些情况下可能就足够了。
数字1是一个有用的提示。当按钮未被按下时，它将禁用焦点，但当它被按下时它将保持显示。我使用'：active：focus {outline：none;}'禁用了焦点点击活动元素。 – certainlyakey
我在上面的评论中提到过这个，但为了清楚起见，它值得列出作为单独的答案。只要你并不需要永远实际上有焦点上的按钮，你可以使用焦点事件将其删除，才可以应用任何CSS效果：
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这就避免了时可以看到闪烁使用点击事件。这会限制界面，并且您将无法选择按钮，但这在所有应用程序中都不是问题。
风格
.not-focusable:focus {
outline: none;
box-shadow: none;
}
使用
<button class="btn btn-primary not-focusable">My Button</button>
该解决方案与其他答案有何不同？ – apaul
只有一点区别 - 您可以删除指定类“not-focusable”所需的元素的焦点，而不会覆盖所有按钮，链接等的行为。 –
不适用于bootstrap 4。 –
如果使用规则:focus { outline: none; }去除轮廓，链接或控制将成为焦点，但与键盘的用户没有任何迹象的焦点。使用像onfocus="blur()"这样的JS删除它的方法更糟糕，并且会导致键盘用户无法与控件交互。
可以使用的黑客，是排序确定的，包括增加:focus { outline: none; }规则，当用户用鼠标交互，如果检测到键盘交互，再把它们去掉。 Lindsay Evans已为此解决了这个问题：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>
我没有把togheter笔：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>
事实上，这个效果很好 – lkuty
这对大多数用户来说很好，但这种方法对屏幕阅读器或键盘不友好，并且会让盲人用户和用户的运动技能受损，无法与按钮交互。 – splodingsocks
他们不是因为它在语义上不正确:) –
只需outline:0; CSS添加元素。
我们遇到了类似的问题，并注意到Bootstrap 3 在其选项卡上没有问题（在Chrome中）。看起来他们使用的是outline-style，它允许浏览器决定最佳做法，并且Chrome似乎按照自己的想法做事：除非您只是单击了元素，否则在聚焦时显示轮廓。
对于outline-style的支持很难确定，因为浏览器可以决定这意味着什么。最好检查几个浏览器，并有一个后退规则。
我刚刚在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事件中，因此调用e.preventDefault()onMouseDown根据您的需求可能是一个干净的解决方案。这当然是一种可访问性友好的解决方案，但显然它会调整可能与您的Web项目不兼容的鼠标点击行为。
我目前正在使用此解决方案（在react-bootstrap项目中），并且在点击后我没有收到焦点闪烁或保留按钮焦点，但我仍然能够选中我的焦点并以可视方式显示同一焦点纽扣。
是的。您的解决方案有效谢谢你的提示。这是解决方案的[Fiddle]（http://jsfiddle.net/w5y5tak5/1/）。 但它需要一个javascript处理程序来连接到每个按钮。如果我们可以通过CSS解决方案实现这一点，那将是非常好的。 –
我认为人们希望重点关注点击它的元素，并且此解决方案可以防止这种情况发生。我经常点击一个元素，然后在释放鼠标之前将它移开，让它聚焦，这样我就可以从那里选择。 –
对于任何浏览片段的人，这应该工作并保留onClick：'onMouseDown = {e => e.preventDefault（）}' –
试试这个解决方案去除按钮周围的边框。在CSS中添加此代码。
尝试
button:focus{
outline:0px;
}
如果没有工作，然后用下面。
button:focus{
outline:none !important;
}
这是工作，我希望帮你
.btn:focus, .btn:focus:active {
outline: none;
}
晚了，但谁知道它可以帮助别人。 的CSS看起来像：
.rhighlight{
outline: none !important;
box-shadow:none
}
的HTML看起来像：
<button type="button" class="btn btn-primary rHighlight">Text</button>
这样你就可以保持BTN与它相关的行为。
'element：focus {box-shadow：none; }'删除了蓝色轮廓/阴影。 – user435421
如果你不想要的按钮轮廓与所有的状态，你可以用下面的代码
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
outline: none;
}
这对我的作品覆盖CSS，没有提及另一种解决方案。只要把它扔到click事件...
$(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-箱阴影将为Chrome和Safari浏览器。
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个纲要：没有人会为这两个按钮和标签工作
这是如何回答这个问题的？请添加一些补充。 –
大纲：0;您可能会感兴趣 –
点击后是否添加了任何课程？ – Kuzgun
你试过-webkit-appearance：没有在你的按钮上？ – Danield