点击保持焦点轮廓，解决 outline 消失问题

本文揭秘了一个常被忽视但至关重要的可访问性细节：当用户鼠标长按时，自定义切换控件（如开关）的焦点轮廓意外消失，导致视觉反馈中断、违背无障碍规范；作者提供了一套精巧纯粹的 CSS 解决方案——仅需为 `.toggle_slider:active::after` 添加一行 `opacity` 声明，即可无缝补全鼠标交互路径下的轮廓显示，与键盘 `:focus` 效果协同工作，无需任何 JavaScript，既轻量高效又完全符合 WCAG 2.1 要求，让每一次点击、每一次聚焦都清晰可见、可感知、可依赖。

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

在构建可访问的自定义表单控件（如开关 Toggle）时，视觉焦点反馈至关重要。你可能已通过 input:focus + .toggle_slider::after 正确实现了键盘聚焦时的轮廓效果，但会发现：当用鼠标点击并持续按住时，轮廓立即消失——这是因为此时 <input> 元素并未处于 :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 属性，并保留原生 <input> 的语义与焦点能力（当前方案为视觉增强，非语义替代）；
• 测试时请同时验证键盘（Tab → Space/Enter）与鼠标（点击拖拽、快速点击）两种操作流的轮廓连续性。

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

理论要掌握，实操不能落！以上关于《点击保持焦点轮廓，解决 outline 消失问题》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！