这确实是一个基本问题，但我找不到答案。我的 CSS 看起来像这样;
a:focus, button:focus{outline:3px solid #000;}
我想要的是，焦点仅在用户使用键盘按 Tab 键转到这些元素时才适用。
这正是它在Chrome中的工作方式，但是在FF和IE中，当用户单击元素时，大纲会显示出来。这不是我想要的。
Chrome 实际上是错的吗？我试图保持简单，避免Javascript是可能的。如何使大纲仅在用户在页面周围按选项卡显示时显示？
浏览器仅支持IE8+，FF和Chrome。
感谢您的任何帮助！
好吧，我知道如果可能的话，我说没有 JS，但我不想再花更多的时间在这上面......所以对于任何感兴趣的人，这就是我所做的
$("a, button, select, input[type=submit], input[type=text]").keyup(function(){
$(this).addClass("focusOutline");
}).blur(function(){
$(this).removeClass("focusOutline");
});
这做得很好。呵��
使用 ：focus-visible。它目前是W3C建议使用CSS设置仅键盘焦点的样式。在主流浏览器支持它之前，您可以使用这个强大的 polyfill。
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
outline: none;
}
/* Optional: Customize .focus-visible */
.focus-visible {
outline-color: lightgreen;
}
我还写了一篇更详细的文章，以防您需要更多信息。
我在其他地方以不同的方式执行此操作，并认为我会将其添加到此处，作为任何偶然发现它的人的替代解决方案：
/**
* If user hits tab key then we add a class to <html> that lets us use
* additional styling hints to show focus etc.
*/
function detectTabKey() {
$(document).keydown(function(e) {
if (e.keyCode === 9) {
$('html').addClass('is-tab-user');
}
});
}