CSS 实现点击时保持焦点轮廓：解决切换控件激活态 outline 消失问题-html教程-PHP中文网

当用户按住鼠标不放时，自定义切换控件的焦点轮廓（outline）意外消失，本文提供纯 CSS 方案，通过 :active 伪类显式恢复 ::after 轮廓层的可见性，无需 JavaScript 即可确保视觉反馈连续、符合无障碍规范。

当用户按住鼠标不放时，自定义切换控件的焦点轮廓（outline）意外消失，本文提供纯 css 方案，通过 `:active` 伪类显式恢复 `::after` 轮廓层的可见性，无需 javascript 即可确保视觉反馈连续、符合无障碍规范。

在构建可访问的自定义表单控件（如开关 Toggle）时，视觉焦点反馈至关重要。你可能已通过 input:focus + .toggle_slider::after 正确实现了键盘聚焦时的轮廓效果，但会发现：当用鼠标点击并持续按住时，轮廓立即消失——这是因为此时元素并未处于 :focus 状态（它被 pointer-events: none 阻断，且未实际获得焦点），而 .toggle_slider 本身又未定义激活态下的轮廓行为。

根本原因在于：:focus 仅响应焦点获取（如 Tab 键导航），而鼠标按下触发的是 :active 状态。因此，需为 .toggle_slider 显式补充 :active::after 规则，使其在用户按住鼠标时同样显示轮廓：

.toggle_slider:active::after {
  opacity: var(--focus-opacity);
}

该规则与已有的 input:focus + .toggle_slider::after 形成互补，共同覆盖键盘与鼠标的两种交互路径。完整关键样式如下（精简版）：

/* 轮廓层基础定义（默认隐藏） */
.toggle_slider::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 26px;
  border: 2px solid var(--focus-color);
  margin: -3px; /* 补偿边框宽度，确保精准贴合 */
  opacity: 0;
  transition: opacity 0.15s ease; /* 建议添加过渡，提升体验 */
}

/* 键盘聚焦时显示 */
.toggle input:focus + .toggle_slider::after {
  opacity: var(--focus-opacity);
}

/* 鼠标按下时显示（核心修复） */
.toggle_slider:active::after {
  opacity: var(--focus-opacity);
}

⚠️ 注意事项：

确保 .toggle_slider 元素设置了 cursor: pointer，以提供明确的交互提示；
margin: -3px 是为抵消 border: 2px 导致的尺寸偏移，使轮廓完美包裹圆角容器；
若需更高可访问性，建议移除 aria-hidden="true"，改用 role="switch" 和 aria-checked 属性，并保留原生的语义与焦点能力（当前方案为视觉增强，非语义替代）；
测试时请同时验证键盘（Tab → Space/Enter）与鼠标（点击拖拽、快速点击）两种操作流的轮廓连续性。

通过这一简洁的 CSS 补充，即可实现跨输入方式一致、平滑、符合 WCAG 2.1 视觉反馈要求的焦点状态管理，真正践行“无 JS，亦可达”的前端可访问性实践。