MakerBox

CSS 체크박스 생성기

커스텀 CSS 체크박스를 디자인하세요 — 체크마크·엑스·채운 사각형·점·고리·가로줄 등 10가지 표시 스타일, 색상·크기·모서리 반경을 고르고 HTML과 CSS를 복사. 100% 브라우저에서, 업로드 없음.

스타일
체크 색상
표시 색상
테두리 색상

실시간 미리보기 — 상자를 클릭해 토글하세요

CSS
.cb {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.cb input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5 10 17.5 19 6.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0 0;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, background-size 150ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.cb input[type="checkbox"]:checked {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
  background-size: 70% 70%;
}
.cb input[type="checkbox"]:focus-visible {
  outline: 2px solid #6c5ce7;
  outline-offset: 2px;
}
HTML
<label class="cb">
  <input type="checkbox" checked />
  <span>Accept terms</span>
</label>

🔒 브라우저에서 생성되며 업로드되지 않습니다.

순수 CSS로 커스텀 체크박스 만들기

10가지 표시 스타일(체크마크·채운 사각형·엑스·얇은 선·굵은 선·단색·원형·점·고리·가로줄)과 체크 색상·표시 색상·테두리 색상·크기·모서리 반경을 고르면 실시간 미리보기가 즉시 갱신됩니다. 마음에 들면 CSS와 HTML을 복사하세요. 실제 <input type="checkbox">에 appearance: none을 적용해 스타일링하므로 키보드·스크린리더 접근성이 그대로 유지되고 자바스크립트가 필요 없습니다.

체크 표시는 어떻게 그려지나요

스타일에 따라 그려지는 체크마크·엑스·사각형·점·고리·가로줄 표시는 인라인 SVG를 입력 요소의 background-image로 넣고 :checked 가상 클래스로 나타냅니다. 단일 배경 레이어라 별도 래퍼나 가상 요소 없이 <input> 하나와 규칙 한 벌만 복사하면 됩니다.

자주 묻는 질문

생성된 체크박스는 접근성이 좋은가요?

네. <div>로 대체하지 않고 실제 <input type="checkbox">를 appearance: none으로 스타일링하므로 키보드 조작, 스페이스바 토글, 포커스 순서, 스크린리더 의미가 그대로 유지됩니다. :focus-visible 아웃라인도 포함됩니다.

이 체크박스에 자바스크립트가 필요한가요?

아니요. 체크 표시는 :checked 가상 클래스로 나타나는 인라인 SVG 배경 이미지라서 스크립트나 라이브러리 없이 순수 HTML과 CSS만으로 동작합니다.

표시 색을 상자 색과 따로 지정하려면 어떻게 하나요?

"표시 색상" 선택기를 쓰세요. 체크된 상자의 채움과 테두리는 "체크 색상"을 따르고("테두리 색상"은 체크하지 않은 상자의 테두리이며, "단색" 스타일에서는 체크하지 않은 상자를 채우는 색입니다), 그 안에 그려지는 체크·엑스·사각형·점·고리·가로줄 표시에는 "표시 색상"이 적용됩니다.