如何在<button>标签上使用css大纲,只能通过标签,但不能点击？

Question

我们有一些按钮,用css设置样式,并有一些像这样的图标:

此按钮具有默认的轮廓属性,因此每次我们点击它时,它都有一个轮廓(镀铬蓝色):

为了摆脱它,我们当然可以覆盖这个属性,如:

outline: none

但是当我们选中并触及此按钮时,它也没有任何轮廓,这对于可访问性来说是一种不好的做法.

我们能否实现这一点,以便只有当我们使用标签来显示此按钮时才显示此轮廓,但是当我们点击它时却不会出现？

正如信息:我们也有一些一个似乎在视觉上就这样的标签,并用标签,我们有确切的这种行为,我们希望,轮廓似乎只有当我们到那个链接选项卡,但不能点击.我们只想与按钮标签具有完全相同的行为.

Answer 1

我们是否可以实现此目的，以便仅当我们使用选项卡点击此按钮时才显示该轮廓，而不是在单击它时显示？

是的，您可以使用:focus-visible.

如果您希望在选中按钮但未单击按钮时显示轮廓，请outline: none在按钮上设置 on:focus但不设置 on :focus-visible：

button:focus:not(:focus-visible) {
  outline: none;
}

Answer 2

当你点击一个元素它转换:active就可以了,所以你想链:active和:focus在一起:

button:active:focus {
  outline: none;
}

<button>Button</button>

正如你所说这不适用于额外的css,在这种情况下你必须实现一个有点复杂的解决方案,当你第一次使用tab时你将body添加到body,否则你删除所有的一起

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>