当用户按住鼠标不放时，自定义开关控件的焦点轮廓（outline）会意外消失；本文提供纯 CSS 的修复方案，通过 :active 伪类精准控制 ::after 轮廓层的可见性，确保交互全程视觉反馈一致。
当用户按住鼠标不放时，自定义开关控件的焦点轮廓（outline）会意外消失；本文提供纯 css 的修复方案，通过 `:active` 伪类精准控制 `::after` 轮廓层的可见性，确保交互全程视觉反馈一致。
在构建可访问、高可用的自定义表单控件（如开关 Toggle）时，视觉焦点反馈至关重要。标准 <input type="checkbox"> 元素在获得焦点时默认显示浏览器 outline，但本例中使用隐藏原生输入框 + 自定义 .toggle_slider 的方式实现 UI，其焦点样式依赖于 input:focus + .toggle_slider::after 规则——该规则仅在键盘聚焦（如 Tab 导航）时生效，而鼠标按下（:active 状态）时，焦点并未丢失，但 :focus 伪类已不匹配，导致轮廓瞬间消失，造成视觉断层。
根本解决思路是：将轮廓的显示逻辑从仅响应 :focus，扩展为同时响应 :focus 和 :active 状态。由于 .toggle_slider 本身是紧跟在 <input> 后的兄弟元素，我们无法直接用 input:active + .toggle_slider::after（因为 :active 作用于 <input> 时，其 pointer-events: none 已禁用激活态），因此需将 :active 应用于 .toggle_slider 本身——它作为可点击区域（cursor: pointer），天然支持 :active 状态。
只需添加以下一行 CSS 即可修复：
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}该规则与原有的 input:focus + .toggle_slider::after 并存，形成双重保障：
立即学习“前端免费学习笔记（深入）”；
- 键盘聚焦 → 显示轮廓；
- 鼠标按下 → 同样显示轮廓；
- 两者无冲突，且过渡平滑（得益于统一的 transition: .3s）。
✅ 完整修复后的关键 CSS 片段如下（含上下文）：
/* …其他原有样式保持不变… */
.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 .3s; /* 建议显式声明 transition，增强兼容性 */
}
/* ? 新增：确保鼠标按下时轮廓持续可见 */
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}
/* ? 原有：确保键盘聚焦时轮廓可见 */
.toggle input:focus + .toggle_slider::after {
opacity: var(--focus-opacity);
}⚠️ 注意事项：
- 不要移除 input:focus + .toggle_slider::after，否则键盘导航将失去焦点指示；
- :active 伪类在触摸设备上同样生效（对应 touchstart），因此该方案具备跨平台一致性；
- 若需进一步提升可访问性，建议移除 aria-hidden="true"（当前示例中存在），改用 aria-labelledby 或 aria-label 显式声明控件语义，确保屏幕阅读器正确识别；
- 所有 transition 属性应明确指定生效属性（如 transition: opacity .3s），避免意外触发重绘。
通过这一简洁、零 JavaScript 的 CSS 补丁，即可彻底解决“按住鼠标时轮廓消失”的常见交互缺陷，在保持代码轻量的同时，显著提升控件的可用性与专业度。
