CSS 체크박스 생성기
크기, 모서리, 테두리, 배경, 체크 색을 설정하고 네이티브 입력 패턴을 복사하세요.
실시간 미리 보기
체크박스 상태
Tab으로 표시되는 초점 테두리를 확인하세요. 미리 보기 컨트롤은 기본 입력 요소이므로 키보드와 레이블 클릭으로 작동합니다.
사용 방법
사용 방법
- 크기, 모서리, 테두리, 배경, 체크 색을 조정합니다.
- 선택, 미선택, 비활성, 키보드 포커스 상태를 확인합니다.
- HTML과 CSS를 복사하고 입력을 설명 레이블에 연결합니다.
실제 체크박스 유지
appearance: none은 기본 모양만 제거하고 input type=checkbox는 남겨 키보드, 보조 기술, 양식 제출 및 네이티브 상태를 지원합니다. display: none, visibility: hidden 또는 클릭 가능한 div로 대체하지 않습니다.
레이블과 포커스도 필수
input id와 label for를 연결해 텍스트 클릭과 스크린 리더 이름을 지원합니다. :focus-visible을 유지하거나 동등한 표시를 제공하세요. 비활성 컨트롤은 보이지만 변경할 수 없으며 낮은 불투명도만 유일한 신호가 되어서는 안 됩니다.
자주 묻는 질문
더 알아보기
왜 기본 모양을 숨기나요?
appearance: none은 시각 스타일만 없애며 선택, 비활성, 키보드, 제출 동작이 있는 네이티브 컨트롤은 유지합니다.
포커스 링을 없애도 되나요?
다른 분명한 표시 없이 없애지 마세요. Space를 눌렀을 때 바뀔 컨트롤을 보여야 합니다.
생성된 레이블만으로 충분한가요?
필요한 연결 방식을 제공합니다. 구체적인 설명으로 바꾸고 여러 개면 id를 고유하게 하세요.