html - 如何在 标签上有一个 css 轮廓，只能通过选项卡，而不是点击？

Question

我们有一些按钮，它们是用 css 设计的，并且有一些像这样的图标:

这个按钮有一个默认的轮廓属性，所以每次我们点击它，它都有一个轮廓( Chrome 蓝色):

要摆脱它，我们当然可以像这样覆盖这个属性:

outline: none

但是当我们通过 Tab 键切换到这个按钮时，它也不会有任何轮廓，这对于可访问性来说是一个不好的做法。

我们能否做到这一点，以便仅当我们使用带有选项卡的按钮时才显示此轮廓，而不是在我们单击它时显示？

就像信息一样:我们也有一些 a 标签，在视觉上看起来就像那样，并且有了标签，我们就有了我们想要的这种行为，只有当我们点击该链接时，轮廓才会出现，但不是点击。我们只想让按钮标签也有完全相同的行为。

Answer 1

当您单击一个元素时，它会在其上转换 :active，因此您希望将 :active 和 :focus 链接在一起:

button:active:focus {
  outline: none;
}

<button>Button</button>

正如你所说，这不适用于额外的 css，在这种情况下，你必须实现一个有点复杂的解决方案，当用户第一次使用选项卡时，你将类添加到主体，否则你将一起删除轮廓

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

body:not(.user-is-tabbing) button:focus {
  outline: none;
}

button {
    background-color: red;
}

<button>Button</button>