本文介绍一种轻量、语义清晰且无需 javascript 的纯 css 方案，实现具有两个明确标签（如“recurring transfer”和“one time”）的切换按钮，支持平滑过渡、状态高亮与无障碍访问。
本文介绍一种轻量、语义清晰且无需 javascript 的纯 css 方案，实现具有两个明确标签（如“recurring transfer”和“one time”）的切换按钮，支持平滑过渡、状态高亮与无障碍访问。
在现代 Web 开发中，一个直观、可访问且风格统一的双态切换控件（如“开启/关闭”、“定期/单次”）常被用于表单或配置面板。相比复杂动画或第三方库，纯 CSS 实现更轻量、更可控，也更利于维护。
以下是一种结构简洁、语义正确、视觉表现力强的实现方式：
✅ HTML 结构（语义化 + 可访问）
<input type="checkbox" id="transfer-mode" class="toggle-checkbox" /> <label for="transfer-mode" class="toggle-wrapper"> <div>Recurring Transfer</div> <div>One Time</div> </label>
- 使用
<input type="checkbox">保证原生表单行为与可访问性（支持键盘空格切换、屏幕阅读器识别）； -
<label></label>关联for属性，点击任意区域均可触发切换； - 两个
<div> 分别承载左右标签，语义清晰，便于样式控制。<h3>? 核心 CSS 实现</h3><pre class="brush:php;toolbar:false;">.toggle-checkbox { display: none; /* 隐藏原生复选框 */ } .toggle-wrapper { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: fit-content; border: 3px solid #f02d1f; border-radius: 20px; background: #f02d1f; color: #f02d1f; cursor: pointer; padding: 2px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* 滑块背景（白色圆角矩形） */ .toggle-wrapper::before { content: ''; position: absolute; top: 2px; left: 2px; width: 50%; height: calc(100% - 4px); border-radius: 16px; background: white; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } /* 切换时滑块右移 */ .toggle-checkbox:checked + .toggle-wrapper::before { left: 51%; /* 略大于 50% 避免视觉缝隙 */ } /* 标签文字样式 */ .toggle-wrapper > div { padding: 10px 20px; text-align: center; z-index: 2; font-weight: 500; transition: color 0.3s ease; } /* 未选中时：左侧激活，右侧灰色 */ .toggle-checkbox + .toggle-wrapper div:first-child { color: white; } .toggle-checkbox + .toggle-wrapper div:last-child { color: #f02d1f; } /* 选中时：右侧激活，左侧变灰 */ .toggle-checkbox:checked + .toggle-wrapper div:first-child { color: #f02d1f; } .toggle-checkbox:checked + .toggle-wrapper div:last-child { color: white; }</pre><h3>? 关键设计说明</h3> <ul> <li> <strong>响应式滑块</strong>：利用 <code>::before伪元素模拟滑动背景，通过left百分比位移实现切换动画； - 色彩对比与可读性：激活侧文字为白色（高对比），非激活侧使用主色浅色变体，确保 WCAG AA 合规；
-
过渡曲线优化：
cubic-bezier(0.4, 0, 0.2, 1)提供更自然的缓动效果，优于线性过渡； -
无 JS 依赖：完全基于
:checked伪类驱动状态变化，零 JavaScript，加载快、兼容性好（支持 IE9+）。
⚠️ 注意事项
- 避免在
.toggle-wrapper上设置过小的padding或font-size，否则影响移动端点按体验； - 如需适配深色模式，建议配合
@media (prefers-color-scheme: dark)调整颜色变量； - 若需绑定状态到 Vue/React，只需监听
change事件或绑定v-model/checked属性，HTML 结构完全兼容。
该方案已在 Chrome、Firefox、Safari 及 Edge（Chromium）中稳定运行，兼顾视觉表现、交互反馈与可访问性，是构建专业级 UI 控件的理想选择。
