CSS复选框聚焦按键时的状态名称及移除其影响的CSS方法

核心结论 #

不存在专门匹配“聚焦且按下按键”的单一伪类，但可以通过**:focus:active组合选择器选中该状态，或使用:focus-visible伪类**精准控制键盘交互时的聚焦样式，实现纯CSS自定义。

问题根源 #

你看到的黑色实线轮廓，是浏览器对复选框处于**聚焦且激活（:focus:active）**状态下的默认样式；添加自定义outline后出现的“扩展”效果，是浏览器默认样式与自定义样式叠加导致的。

解决方案 #

方案1：用:focus:active组合控制状态样式

先重置浏览器默认的outline，再分别定义聚焦、聚焦激活状态的自定义样式：

/* 重置浏览器默认outline，避免样式叠加 */
input[type="checkbox"] {
  outline: none;
}

/* 聚焦时的自定义轮廓 */
input[type="checkbox"]:focus {
  outline: 3px solid red;
  outline-offset: 2px; /* 可选：调整轮廓与复选框的间距 */
}

/* 聚焦且按下按键时，保持自定义轮廓（覆盖默认黑色线） */
input[type="checkbox"]:focus:active {
  outline: 3px solid red;
  /* 若需区分状态，可改为不同颜色，比如：outline: 3px solid orange; */
}

方案2：用:focus-visible精准控制键盘聚焦

:focus-visible专门匹配键盘触发的聚焦状态（鼠标点击聚焦不会触发），更贴合你描述的“按下按键时”的场景：

/* 重置默认样式 */
input[type="checkbox"] {
  outline: none;
}

/* 仅键盘聚焦（含按键操作）时显示自定义轮廓 */
input[type="checkbox"]:focus-visible {
  outline: 3px solid red;
  outline-offset: 2px;
}

进阶：自定义复选框外观（可选）

如果不想受浏览器默认复选框样式干扰，可以完全自定义外观，同时保留状态样式：

input[type="checkbox"] {
  /* 隐藏默认复选框 */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  /* 自定义基础样式 */
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

/* 聚焦样式 */
input[type="checkbox"]:focus {
  outline: 3px solid red;
  outline-offset: 2px;
}

/* 聚焦激活样式 */
input[type="checkbox"]:focus:active {
  border-color: #666;
}

/* 选中状态样式 */
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #000;
}

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