如何仅移除点击触发的outline，保留键盘导航（Tab）的outline

要实现仅移除点击触发的outline、保留键盘导航（Tab）触发的outline效果，可以利用CSS的:focus-visible伪类精准控制焦点样式的显示时机：

调整后的CSS代码 #

/* 移除鼠标点击触发焦点时的outline */
.po-radio-focus label:not(:focus-visible) {
  outline: none;
}

/* 仅在键盘导航等需要焦点反馈的场景下显示outline */
.po-radio-focus label:focus-visible {
  outline-color: var(--color-radio-group-border-color-focusable, var(--outline-color-focused));
  outline-width: var(--border-width-lg);
  outline-style: solid;
  outline-offset: 2px;
}

原理说明 #

• :focus-visible是CSS原生伪类，浏览器会自动识别焦点触发方式：仅当焦点通过键盘（如Tab键导航）或其他需要视觉反馈的交互方式触发时，才会匹配该伪类。
• 通过:not(:focus-visible)选中鼠标点击触发的焦点状态，移除其outline样式，就能实现点击无outline、键盘导航保留outline的需求。

内容的提问来源于stack exchange，提问作者Nicholas Ribeiro