任务路径 / 从输入到结果
如何设计自定义 CSS 复选框
- 01
设置控件尺寸
勾形按边框内部空间缩放，而非外部尺寸。预览与导出采用同一 CSS 边框形状。可点击预览，或聚焦后按空格键切换原生勾选状态。
- 02
塑造外框
控件支持 18–64 px，边框支持 1–8 px。边框内部至少保留 8 px 容纳勾形；无效组合会清空预览并禁用导出。
- 03
挑选状态颜色
用“边框颜色”设置静止态的轮廓，用“选中颜色”设置填充态，然后切换“显示选中状态”，在实时预览中对比两种状态。
- 04
预览两种状态
切换“显示选中状态”，在实时预览中对比静置和填充两种形态。对勾会在 160 ms 内以小幅放大过渡进入——这正是导出的 CSS 在两种状态间复现的动画。
- 05
复制或下载 CSS
点“复制 CSS”，或点“下载 .css”保存 toolars-checkbox.css。规则集保留了底层的真实 input——appearance: none 只是重新绘制外观——并附带 :focus-visible 与 :disabled 状态样式。
- 06
保持原生标记
把 .checkbox 类直接用在真实 input 元素上，并像对待任何复选框一样搭配 label。键盘焦点、点击行为和辅助技术播报都能正常工作，因为没有替换任何语义。静置时的白色背景是规则的一部分，因此空态在有底色的表面上也可读。