任务路径 / 从输入到结果
如何设计纯 CSS 开关
- 01
设置轨道尺寸
把“轨道宽度”设在 44 到 128 px、“轨道高度”设在 24 到 64 px。宽度必须比高度大至少 8 px，滑块才有滑动的空间。
- 02
适配滑块
把“滑块尺寸”选在 16 到 56 px 之间。它必须能放进轨道内部——最大不超过轨道高度减 4 px——否则状态会变为“检查取值”并给出确切规则。
- 03
为两种状态配色
用“未激活态轨道”设置关闭位置的颜色，用“激活态轨道”设置打开位置的颜色，然后切换“显示激活状态”，预览 180 ms 过渡的两端。
- 04
预览过渡效果
切换“显示激活状态”，以真实的 180 ms 缓动时间观看滑块滑动和轨道变色。滑块四周的内边距按轨道剩余高度的一半计算，所以在任何你选择的尺寸下都保持均匀贴合。
- 05
复制或下载 CSS
点“复制 CSS”，或点“下载 .css”保存 toolars-switch.css。标记结构由一个真实的复选框 input 和一个 .switch-track 元素配对而成，白色滑块会按计算出的行程在两种状态间滑动。
- 06
组装标记
在 .switch 容器里严格按此顺序放置：一个复选框 input，后跟一个 .switch-track 元素——兄弟选择器依赖这个顺序。input 会缩成不可见的 1 px 方块但仍可聚焦，聚焦时会用你的激活轨道色绘制 3 px 描边。