CSS Switch 생성기
「CSS Switch 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
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.