如何删除单击button上的焦点
点击后，我的button全部都有亮点。 这是在Chrome中。
<button class="btn btn-primary btn-block"> <span class="icon-plus"></span> Add Page </button> 我正在使用一个主题的Bootstrap，但我非常肯定这不是它：我在另一个项目之前注意到这一点。
如果我使用<a>标签而不是<button>它会消失。 为什么？ 如果我想用<button> ，我会如何让它消失？
我在另一个页面上find了这个Q和A，并且覆盖了button焦点风格。 这个问题可能是特定于Chrome浏览器的MacOS。
.btn:focus { outline: none; }
请注意，这对可访问性有影响，只有在按键和input具有良好一致的焦点状态时才build议使用。 根据下面的评论，有用户不能使用鼠标。
你想要的东西像：
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur（）方法可以正确删除焦点突出显示，而不会混淆Bootstraps的样式。
不能相信没有人发布这个呢。
使用标签而不是button。
<label type="button" class="btn btn-primary btn-block"> <span class="icon-plus"></span> Add Page </label>
小提琴
虽然删除所有焦点button的轮廓很简单（如user1933897的答案 ），但是从可访问性的angular度来看，这个解决scheme是不好的（例如，请参阅停止使用浏览器的默认焦点轮廓 ）
另一方面，如果说你的浏览器在你点击它之后（如果你在浏览你的话，在OS X上使用Chrome浏览器），那么你就不可能说服你的浏览器停止将点击的button设置为焦点。
所以，我们能做些什么？ 我想起了一些选项。
1）Javascript（jQuery）： $('.btn').mouseup(function() { this.blur() })
您指示您的浏览器在单击button后立即移除任何button周围的焦点。 通过使用mouseup而不是click我们保持基于键盘的交互的默认行为（ mouseup不会被键盘触发）。
2）CSS： .btn:hover { outline: 0 !important }
在这里，你只closures了hoverbutton的轮廓。 显然这并不理想，但在某些情况下可能就足够了。
我的理解是，重点首先应用在e.preventDefault()事件之后，因此根据您的需要调用e.preventDefault()可能是一个干净的解决scheme。 这当然是一个可访问性友好的解决scheme，但显然它调整了可能不兼容您的Web项目的鼠标点击的行为。
我目前正在使用这个解决scheme（在一个react-bootstrap项目中），我没有收到一个焦点闪烁或点击后保留button的焦点，但我仍然能够select我的焦点，并在视觉上可视化的相同button的焦点。
我已经注意到了这一点，即使它真的让我恼火，我相信没有正确的方法来处理这个问题。
我会build议所有其他的解决scheme，因为他们杀死了button的可访问性，所以现在，当你selectbutton，你不会得到预期的重点。
这应该避免！
.btn:focus { outline: none; }
如果使用规则:focus { outline: none; } :focus { outline: none; }删除轮廓，链接或控件将是可调焦的，但没有指示键盘用户的焦点。 方法来删除它，像JS这样的onfocus="blur()"更糟，将导致键盘用户无法与控件交互。
您可以使用的黑客行为，包括添加:focus { outline: none; } :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>
我确实放了一个笔： http ://codepen.io/snobojohan/pen/RWXXmp
但要小心有性能问题。 每次用户在鼠标和键盘之间切换时，都会强制重绘。 更多关于避免不必要的涂料http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
晚了，但是谁知道这可能会帮助别人。 CSS看起来像：
.rhighlight{ outline: none !important; box-shadow:none }
HTML看起来像：
<button type="button" class="btn btn-primary rHighlight">Text</button>
这样你可以保持btn和它的相关行为。
如果上述不适用于您，请尝试以下操作：
.btn：focus {outline：none; box-shadow：none; border：2px solid transparent;}
正如user1933897指出的那样，这可能是特定于Chrome浏览器的MacOS。
我在上面的评论中提到过这个问题，但为了清楚起见，这是值得列出的。 只要您不需要真正关注button，就可以使用焦点事件将其删除，然后才能应用任何CSS效果：
$('buttonSelector').focus(function(event) { event.target.blur(); });
这可以避免使用click事件时可以看到的闪烁。 这会限制界面，并且您将无法selectbutton，但这在所有应用程序中都不是问题。
样式
.not-focusable:focus { outline: none; box-shadow: none; }
运用
<button class="btn btn-primary not-focusable">My Button</button>
我们遇到了类似的问题，并注意到Bootstrap 3在其标签上没有问题（在Chrome中）。 看起来他们正在使用轮廓样式 ，允许浏览器决定最佳做法，而Chrome似乎按照自己的意愿去做：只有在单击元素时才显示轮廓。
由于浏览器决定这意味着什么，所以对outline-style支持很难确定。 最好检查几个浏览器，并有一个后退规则。
试试这个解决scheme来删除button周围的边框。 在CSS中添加此代码。
尝试
button:focus{ outline:0px; }
如果不行的话，请在下面使用。
button:focus{ outline:none !important; }
这是工作，我希望能帮助你
.btn:focus, .btn:focus:active { outline: none; }
只需添加outline:0; CSS元素。
我在MacOS和Chrome上遇到同样的问题，同时使用一个button来触发“转换”事件。 如果读者已经在使用事件侦听器，那么可以通过在你的动作之后调用.blur()来解决这个问题。
例：
nextQuestionButtonEl.click(function(){ if (isQuestionAnswered()) { currentQuestion++; changeQuestion(); } else { toggleNotification("invalidForm"); } this.blur(); });
虽然如果你还没有使用事件监听器，join一个解决这个可能会增加不必要的开销，而像以前的答案提供的样式解决scheme更好。
另一个可能的解决scheme是在用户单击button时使用Javascript侦听器添加一个类，然后使用另一个侦听器移除焦点上的类。 这保持了可访问性（可见标签），同时也阻止了Chrome浏览器在单击时考虑button集中的古怪行为。
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/
如果你不想为所有状态的button的大纲，你可以用下面的代码覆盖CSS
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{ outline: none; }
这适用于我，另一个解决scheme没有提到。 只要把它扔在点击事件…
$(this).trigger("blur");
或从另一个事件/方法调用…
$(".btn_name").trigger("blur");
这对我有效。 我创build了一个覆盖必要的CSS的自定义类。
.custom-button:focus { outline: none !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
-webkit-box-shadow适用于Chrome和Safari浏览器。
