当用户点击并按住自定义开关控件时，原生:focus轮廓会消失；本文提供纯 CSS 方案，通过:active伪类恢复轮廓显示，无需 JavaScript。
当用户点击并按住自定义开关控件时，原生:focus轮廓会消失；本文提供纯 css 方案，通过`:active`伪类恢复轮廓显示，无需 javascript。
在构建可访问、语义化的自定义表单控件（如开关 toggle）时，视觉反馈至关重要。标准 <input type="checkbox"> 元素在获得焦点时会显示浏览器默认 outline，但当使用 pointer-events: none 隐藏原生输入框并用 .toggle_slider 作为交互层时，焦点状态仅作用于 <input>，而 :focus 样式需通过相邻兄弟选择器（input:focus + .toggle_slider::after）触发。问题在于：鼠标按下（active 状态）时，焦点并未丢失，但用户感知的轮廓却消失了——这是因为 :focus 不匹配 active 期间的交互状态，而 :active 本身未被样式化。
解决方法非常简洁：为 .toggle_slider 添加 :active 状态下的轮廓显示规则，使其与 :focus 效果一致：
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}该规则确保：只要用户按住滑块区域（即触发 :active），轮廓（.toggle_slider::after）就会以设定的透明度显现，从而弥补 :focus 在持续按压时的视觉断层。
完整关键 CSS 片段如下（已整合 :focus 与 :active）：
立即学习“前端免费学习笔记（深入）”；
.toggle_slider::after {
content: "";
border-radius: 26px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 2px solid var(--focus-color);
margin: -3px; /* 补偿边框宽度，确保精准覆盖 */
opacity: 0;
transition: opacity 0.2s ease; /* 建议添加过渡，提升体验 */
}
/* 焦点态：键盘导航或点击后仍聚焦时显示 */
.toggle input:focus + .toggle_slider::after {
opacity: var(--focus-opacity);
}
/* 按下态：鼠标/触屏按住时立即显示，消除“消失感” */
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}⚠️ 注意事项：
- :active 选择器必须作用于 可交互元素（此处是 .toggle_slider），而非 <input>（因其 pointer-events: none 已禁用事件响应）；
- margin: -3px 是关键细节：因 border: 2px 占据空间，负边距可确保 ::after 完全覆盖滑块区域，避免轮廓偏移；
- 若支持键盘操作，务必保留 input:focus + ... 规则，保障 WCAG 2.1 中「焦点可见性」（Success Criterion 2.4.7）合规；
- 不建议全局禁用 outline（如 outline: none），应始终提供等效视觉反馈。
最终效果：无论是键盘 Tab 聚焦、鼠标点击进入，还是按住拖动，轮廓均能连续、稳定地呈现，显著提升控件的可用性与专业感。
