← 设计与 CSS

设计与 CSS · 本地运行

无障碍 CSS 切换开关生成器

生成一个响应式的基于复选框的切换开关，具有协调一致的轨道和滑块几何形状、激活颜色以及键盘可见的焦点样式。

结果

准备就绪。您的工作数据保留在此浏览器中。

为什么这个工具有用

将开/关偏好项样式化为熟悉的开关，同时保留真实的复选框，以便用于表单、屏幕阅读器和键盘交互。

工作原理

轨道和拇指尺寸会一起进行验证，拇指滑动距离根据两者的差值计算，实时示例会保留在当前浏览器标签页中。

实际示例

创建一个 56×30 像素的通知开关，使其绿色启用状态下，24 像素的滑块在轨道上精确移动 26 像素。

验证

计算是确定性的，并解释验证错误，而不是默默更改无效输入。

隐私边界

输入和输出保留在此标签页中。复制和下载通过浏览器API完成，无需上传到服务器。

结果护照

每次运行都会报告其工具模式、时间戳以及输入/输出大小，以便对转换后的数据进行审计。