CSS开关生成器
基于原生checkbox与label生成CSS开关，可调轨道尺寸、圆角、外边距、过渡和颜色，预览checked、unchecked、disabled与focus-visible状态并复制HTML／CSS。
LIVE PREVIEW
Native checkbox states
Each preview is a native checkbox with a connected label. Use Tab and Space to inspect its keyboard behavior and visible focus ring.
使用步骤
如何使用
- Set the track width, height, radius, outer margin, transition speed, and three colors.
- Inspect checked, unchecked, disabled, and keyboard-focus examples. Use Tab and Space on the live native inputs.
- Copy the linked checkbox and label HTML plus the CSS, then replace the sample label and id for your interface.
A checkbox supplies the behavior
The generated control is an input type=checkbox with appearance removed, not a clickable div or hidden replacement. It remains focusable, works with Space, reports its checked and disabled state to assistive technology, and participates in forms. A visual switch is appropriate when an option changes immediately; use a checkbox label that clearly states the setting.
Sizing and movement rules
Track width and height define the control. The thumb is the track height minus 6px, leaving a 3px inset on each side. The editor keeps the width at least 6px greater than the height, and the checked state moves by width minus height so the thumb lands at the opposite edge. Review the result at the sizes used by your interface.
Focus, disabled state, and local output
The CSS keeps a :focus-visible outline rather than removing keyboard focus. Disabled controls stay visible, cannot be changed, and use lower opacity as a supporting cue. Previewing and generating code happen in this browser; no design, color, or code is uploaded. Confirm color contrast, target size, form behavior, and product wording in your own context.
常见问题
你可能还想知道
Is a switch different from a checkbox?
A switch is often presented as a checkbox whose label describes a setting that changes immediately. The underlying checkbox still has two states. Use the wording and interaction model that match your product; this generator does not decide whether a change needs a separate Save action.
Can I remove the focus outline?
Do not remove it unless you provide another clearly visible focus indicator. Keyboard users need to see which switch will change when they press Space.
Why does the thumb move by width minus height?
The thumb has the track height minus 6px, with a 3px inset on either side. Moving it by the difference between the outer width and height places it against the far inset edge.
Does the output include an accessible name?
The sample connects input and label through matching id and for values. Replace the sample text with a clear setting name and make every id unique when you place several switches on one page.