Question

这是一个基本问题，但我找不到答案。我的CSS看起来像这样;

a:focus, button:focus{outline:3px solid #000;}

我想要的是焦点仅在用户使用键盘选中这些元素时应用。

这正是它在Chrome中的运作方式，但在FF和IE中，大纲显示用户点击元素的时间。这不是我想要的。

Chrome实际上是错的吗？我试图保持简单，避免Javascript是可能的。如何仅在用户选中页面时才能显示大纲？

浏览器仅限IE8 +，FF和Chrome。

感谢您的帮助！

Answer 1

好的，我知道如果可能的话，我说没有JS，但我不想再花这么多时间......所以对于任何有兴趣的人来说，这就是我做的事情

$("a, button, select, input[type=submit], input[type=text]").keyup(function(){
    $(this).addClass("focusOutline");
}).blur(function(){
    $(this).removeClass("focusOutline");
});

这项工作做得很好。有时HTH某人

Answer 2

我在其他地方采用了不同的方式，并认为我会在这里添加它作为任何偶然发现它的人的替代解决方案：

/**
* 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');
        }
    });
}

Answer 3

使用: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;
}

我还写了一个更详细的post，以防您需要更多信息。

CSS焦点伪类，仅在键盘（tabbed）焦点上

3 个答案: