如何仅为通过Tab键聚焦的复选框设置样式，点击时不生效？

没问题！这个需求刚好可以用CSS的:focus-visible伪类来完美解决——它就是专门用来区分键盘触发的聚焦和鼠标/触摸等点击触发的聚焦的，完全匹配你想要的效果。

核心原理 #

默认的:focus伪类会在任何触发聚焦的场景下生效（不管是Tab导航还是点击），但:focus-visible只会在浏览器判断「用户需要明确的聚焦提示」时触发，其中就包括通过Tab键导航的情况，而点击/触摸触发的聚焦则不会激活它。

代码实现 #

先看HTML结构：

<input id="checkBox" type="checkbox">

然后是对应的CSS样式：

#checkBox {
  /* 先移除默认的聚焦轮廓，避免和自定义样式冲突 */
  outline: none;
}

#checkBox:focus-visible {
  /* Tab聚焦时显示红色阴影，你可以根据需求调整参数 */
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5);
  /* 如果你更倾向于类似默认的outline效果，也可以换成下面这行 */
  /* outline: 2px solid red; */
}

效果验证 #

• 用Tab键在页面中导航到这个复选框时，会立刻显示红色的聚焦提示；
• 直接点击复选框选中/取消选中时，不会出现任何额外的聚焦样式，完全符合你的要求。

另外补充一下：:focus-visible的兼容性非常好，现在几乎所有现代浏览器都支持，除非你需要兼容IE这类超老旧浏览器，否则不需要额外的降级处理~

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