当用户按住鼠标不放时，自定义开关控件的焦点轮廓（outline）意外消失，本文提供无需 javascript 的纯 css 修复方案：通过 :active 伪类显式维持 .toggle_slider::after 的透明度，确保视觉反馈连续一致。
当用户按住鼠标不放时，自定义开关控件的焦点轮廓（outline）意外消失，本文提供无需 javascript 的纯 css 修复方案：通过 :active 伪类显式维持 .toggle_slider::after 的透明度，确保视觉反馈连续一致。
在构建可访问、语义化的自定义表单控件（如开关 Toggle）时，视觉焦点状态至关重要——它不仅提升键盘导航体验，也增强鼠标用户的操作确认感。然而，一个常见却易被忽视的问题是：当用户点击并持续按住鼠标左键时，:focus 样式会失效，导致焦点轮廓（如本例中通过 ::after 伪元素模拟的边框）突然消失。这是因为 :focus 仅在元素获得焦点时生效（例如 Tab 键聚焦或点击后自动聚焦），而鼠标按下（mousedown）本身并不重置焦点，但浏览器默认会为处于 :active 状态的元素应用样式层叠规则，可能覆盖或干扰 :focus 的表现。
根本原因在于：当前样式仅在 input:focus + .toggle_slider::after 中设置 opacity，但鼠标按下期间，input 元素虽仍处于 :focus 状态，其兄弟元素 .toggle_slider 却因交互进入了 :active 状态——而原始 CSS 并未为 .toggle_slider:active::after 定义行为，导致该伪元素回退到初始 opacity: 0，轮廓“消失”。
✅ 正确解法是主动声明 :active 状态下的视觉表现，与 :focus 逻辑对齐：
/* 关键修复：确保鼠标按下时轮廓持续可见 */
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}
将此规则加入原有样式表即可。完整优化后的核心 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.3s; /* 推荐添加过渡，避免闪烁 */
}
/* 焦点状态（键盘/点击获取焦点后） */
.toggle input:focus + .toggle_slider::after {
opacity: var(--focus-opacity);
}
/* 激活状态（鼠标按下期间）→ 修复关键点 */
.toggle_slider:active::after {
opacity: var(--focus-opacity);
}
? 注意事项与最佳实践：
- ✅ 不要移除 :focus 样式：aria-hidden="true" 已屏蔽原生 的可访问性，但 :focus 仍需保留，以支持键盘用户（Tab 导航）；
- ✅ transition 建议统一加在 ::after 上：避免 :focus 和 :active 切换时出现跳变；
- ⚠️ 慎用 outline: none：若全局重置了 outline，需确保此处 ::after 边框具备足够对比度（WCAG AA/AAA 合规）；
- ? 兼容性：:active 伪类在所有现代浏览器及 IE11+ 中均受支持，无降级风险。
最终效果：无论用户是通过键盘聚焦、鼠标点击，还是长按鼠标不松开，.toggle_slider 周围的半透明高亮轮廓都将稳定呈现，实现符合无障碍标准（WCAG 2.1 SC 2.4.7）的清晰视觉反馈。整个方案零 JavaScript，轻量、可靠、易于维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
