디자인( CSS) · 로컬에서 실행됨

접근 가능한 CSS 토글 스위치 생성기

일관된 트랙과 엄지(thumb) 기하, 활성 색상, 그리고 키보드로 보이는 포커스 처리를 갖춘 반응형 체크박스 기반 토글 스위치를 생성하세요.

결과

준비 완료. 작업 데이터는 이 브라우저에 유지됩니다.

이 도구가 유용한 이유

폼, 스크린 리더, 키보드 상호작용을 위해 실제 체크박스를 유지하면서, 익숙한 스위치처럼 켜기/끄기 환경설정을 스타일링하세요.

트랙과 엄지의 치수는 함께 검증되며, 엄지 이동 거리는 두 값의 차이로 계산되고 실시간 샘플은 현재 브라우저 탭 안에 유지됩니다.

56 x 30픽셀 알림 스위치를 만들되, 초록색 활성 상태에서 24픽셀 엄지 손잡이가 트랙을 따라 정확히 26픽셀 이동하도록 하세요.

계산은 결정적이며, 잘못된 입력을 조용히 변경하는 대신 유효성 검사 오류를 설명합니다.

입력과 출력은 이 탭에 그대로 유지됩니다. 복사와 다운로드는 서버 업로드 없이 브라우저 API를 통해 이루어집니다.

각 실행은 해당 도구 모드, 타임스탬프, 입력/출력 크기를 보고하므로 변환된 데이터를 감사할 수 있습니다.