CSS 체크박스 생성기

이 도구는 무엇인가요?

브라우저 기본 체크박스는 브라우저마다 모양이 다르고, 겉모양이 CSS가 아니라 운영체제가 그려주기 때문에 직접 다시 꾸미기가 어렵습니다. 표준적인 해결책은 네이티브 체크박스를 시각적으로만 숨기고 형제 요소를 대신 스타일링하는 것으로, 체크박스의 :checked 상태를 기준으로 동작합니다 — 입력 요소 자체는 여전히 완전히 기능하고 접근성도 유지되며, 겉모양만 바뀝니다.

이 도구는 자주 쓰이는 체크박스 스타일 세 가지를 이 패턴으로 만들어줍니다: 애니메이션 체크마크가 있는 둥근 박스, iOS 스타일 슬라이딩 토글 스위치, 채워진 원형(라디오 버튼 느낌) 스타일. 미리보기의 체크박스를 클릭해 체크된 상태를 확인하고, 크기와 강조 색상을 조정한 뒤 CSS를 복사하세요.

출처: Selectors Level 4, W3C — 이 기법이 기반하는 :checked 의사 클래스를 정의하는 명세.

왜 사용해야 할까요?

• 실시간으로 클릭 가능한 미리보기 — 체크박스를 토글하면서 체크됨/체크 안 됨 상태가 정확히 어떻게 보이는지 확인할 수 있습니다.
• 체크마크 박스, 토글 스위치, 채워진 원형까지 자주 쓰이는 세 가지 스타일을 한 도구에서 제공합니다.
• 실제 요소는 진짜 <input type="checkbox">로 남아있어서 키보드 탐색, 폼 제출, 스크린리더까지 그대로 정상 동작합니다.
• 크기와 강조 색상을 조정하면 변수로 남기지 않고 CSS 값에 바로 반영됩니다.
• 아이콘 폰트나 SVG 파일, 이미지가 전혀 필요 없습니다 — 체크마크와 스위치 손잡이는 순수 CSS 테두리와 가상 요소로 그려집니다.
• 무료, 브라우저에서 바로 동작, 가입 불필요.

사용 방법

1. 스타일을 고르세요: 둥근 체크마크, 토글 스위치, 채워진 원형.
2. 크기 슬라이더를 드래그해 체크박스 크기를 키우거나 줄이세요.
3. 강조 색상을 고르세요 — 이 색이 체크된 상태의 배경과 테두리 색이 됩니다.
4. 미리보기 패널의 체크박스를 클릭해 체크됨/체크 안 됨 상태가 둘 다 잘 보이는지 확인하세요.
5. 생성된 CSS를 스타일시트에 복사하고, 미리보기와 같은 방식으로 감싼 <input type="checkbox">에 적용하세요.

예시

입력

스타일: 둥근 체크마크 · 크기: 24px · 색상: 주황색

결과

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

체크박스 input은 시각적으로 숨겨져 있고, 실제로 보이는 박스는 :checked 상태로 스타일링된 형제 <span>입니다. 체크되면 작게 회전된 테두리가 체크마크처럼 그려집니다.

네이티브 체크박스를 제거하지 않고 숨기는 이유

진짜 <input>을 빼버리고 클릭 이벤트가 달린 <div>만으로 체크박스를 만들고 싶은 유혹이 들 수 있지만, 그러면 키보드 지원, 폼 제출, 스크린리더 시맨틱을 그냥 잃게 됩니다. 이 도구가 생성하는 패턴은 실제 체크박스 input을 마크업에 그대로 두고 opacity: 0으로 시각적으로만 숨기고 위치만 재배치합니다 — 그래서 브라우저는 여전히 이를 진짜 체크박스로 취급하고, 형제 요소가 눈에 보이는 스타일링을 담당합니다.

세 가지 스타일 한눈에 보기

• 둥근 체크마크: 익숙한 네모+체크마크 패턴으로, 폼 필드, 약관 동의 체크박스, 다중 선택 목록에서 가장 흔히 쓰입니다.
• 토글 스위치: 폼 필드보다는 즉각적인 켜기/끄기 설정처럼 읽혀서, 체크박스 목록보다는 환경설정 화면에 더 잘 어울립니다.
• 채워진 원형: 최소한의 라디오 버튼 같은 느낌으로, 주변 UI가 둥근 모양 위주일 때 네모 박스가 시각적으로 무겁게 느껴지는 경우에 유용합니다.

나머지 UI와 맞추기

생성된 강조 색상은 체크된 상태에만 영향을 주므로, 브랜드나 버튼 색과 맞춰서 체크박스가 페이지 전체와 어울리게 만드세요. 인터페이스 다른 곳에서 쓰는 것과 같은 border-radius를 맞추면 더 일관된 느낌을 줄 수 있습니다.

→ Border Radius 생성기 · 색상 선택기

자주 묻는 질문