CSS 체크박스 커스텀. 모던 폼 디자인.
☑️ 미리보기 (클릭)

사용법

  1. 스타일 (둥근/원형/네온 등)
  2. 크기·체크 마크
  3. 색상 (체크·마크·테두리)
  4. 레이블 텍스트
  5. HTML+CSS 복사

주요 기능

  • 5가지 스타일 (둥근·사각·원형·머티리얼·네온)
  • 4가지 체크 마크 (✓·●·✗·＋)
  • 크기·색상·속도 자유
  • 레이블 포함 완전 HTML
  • 실시간 클릭 테스트

활용 예시

  • 회원가입 폼 — 약관 동의
  • 설정 — 멀티 체크
  • 할 일 목록 — Todo 앱
  • 설문조사 — 다중 선택
  • 필터 — 검색 옵션

커스텀 체크박스 만들기

브라우저 기본 체크박스는 OS별로 모양이 다릅니다(macOS·Windows·Linux). 통일된 디자인은 (1) input 숨김 (opacity:0) (2) label로 가짜 박스 그리기 (3) :checked 의사클래스로 체크 상태 스타일. 이게 표준 패턴.

자주 묻는 질문

접근성?

실제 input은 숨김(opacity:0)만 하고 포커스 가능. 키보드 Tab + Space 동작.

여러 개?

HTML 복사 후 id를 다르게 (cb1, cb2…), 또는 name="..." 그룹화.

indeterminate 상태?

JS로 setattribute('indeterminate', true). CSS만으로는 표현 어려움.

무료?

네.