CSS 复选框生成器
设置复选框尺寸、圆角、边框、背景和勾选颜色，复制原生输入样式。
实时预览
复选框状态
使用 Tab 查看可见焦点轮廓。预览控件仍为原生输入，支持键盘和标签点击。
使用步骤
如何使用
- 调整尺寸、圆角、边框、背景和勾选颜色。
- 查看选中、未选中、禁用和键盘焦点状态。
- 复制 HTML 和 CSS，并将输入控件关联到描述性标签。
保留真实复选框
appearance: none 只移除浏览器默认外观，文档中仍有真实 input type=checkbox，供键盘、辅助技术、表单提交和原生状态使用。不会用 display: none、visibility: hidden 或可点击 div 替代。
标签与焦点不可缺少
input id 与 label for 配对，让点击文字可切换并为屏幕阅读器提供名称。保留 :focus-visible 或提供同等清晰的焦点提示。禁用控件仍可见但不可更改，降低不透明度不应是唯一提示。
常见问题
你可能还想知道
为什么 CSS 隐藏原生外观？
appearance: none 只移除默认视觉样式；复选框仍是原生可聚焦控件，保留选中、禁用、键盘和提交行为。
可以去掉焦点环吗？
没有其他清楚的焦点样式时不要去掉。键盘用户需要看到按 Space 会改变哪个控件。
生成的标签能让每个复选框都可访问吗？
它提供关联方式。请用具体选项描述替换示例，并确保每个 id 唯一。