체크박스(checkbox) 꾸미는 방법

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

체크박스 색만 바꾸려면 accent-color를 사용하고, 테두리·체크 표시까지 직접 정하려면 appearance: none으로 기본 모양을 해제한 뒤 선택·포커스 상태를 함께 꾸밉니다. 어느 방법이든 실제 input type="checkbox"와 설명이 있는 label을 유지해야 마우스·키보드 조작과 폼 전송 기능을 사용할 수 있습니다.

색만 바꿀 때는 accent-color부터 사용하기

input[type="checkbox"] {
  accent-color: #176b86;
}

accent-color는 체크박스처럼 지원되는 컨트롤의 강조색을 지정합니다. 기본 모양과 조작 방식을 유지하면서 사이트 색을 반영할 때 간단합니다. 브라우저·운영체제에 따라 세부 모양이 다르고, 지원하지 않는 환경에서는 기본 컨트롤이 표시될 수 있으므로 모든 화면에서 똑같은 픽셀 모양을 보장하는 기능으로 보지는 마세요.

크기와 테두리까지 정교하게 맞춰야 한다면 appearance를 이용한 사용자 지정 모양을 검토합니다. 시각적 모양을 바꾸는 것과 선택 기능을 새로 구현하는 것은 구분해야 합니다. 실제 input을 display: none으로 없애고 빈 라벨만 남기면 기본 Tab 포커스와 조작을 잃을 수 있으므로 이 예제에서는 입력 요소를 숨기지 않습니다.

전체 예제: 기본 모양과 사용자 지정 모양 비교

아래 코드를 checkbox.html로 저장한 뒤 브라우저에서 엽니다. 외부 이미지·라이브러리나 JavaScript는 필요하지 않습니다. 두 번째 체크박스의 체크 표시는 CSS에 포함한 작은 SVG 배경으로 그립니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>키보드로도 조작하는 체크박스</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    form { max-width: 480px; }
    .option { display: flex; align-items: center; gap: 10px;
      min-height: 44px; cursor: pointer; }
    .option input { flex: none; margin: 0; }
    .native { width: 20px; height: 20px; accent-color: #176b86; }
    .custom { appearance: none; width: 20px; height: 20px;
      border: 2px solid #4d6578; border-radius: 4px;
      background: white; cursor: pointer; }
    .custom:checked { border-color: #176b86; background-color: #176b86;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8 6 11 13 4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
      background-position: center; background-repeat: no-repeat; background-size: 16px; }
    input:focus-visible { outline: 3px solid #b95700; outline-offset: 3px; }
    .disabled { cursor: default; color: #647380; }
    .custom:disabled { opacity: 0.55; cursor: not-allowed; }
    button { margin-top: 12px; min-height: 44px; padding: 8px 16px; font: inherit; }
    @media (forced-colors: active) {
      .custom { appearance: auto; background: initial; }
    }
  </style>
</head>
<body>
<h1>체크박스 스타일 비교</h1>
<form method="get">
  <label class="option" for="news">
    <input class="native" type="checkbox" id="news" name="news" value="yes">
    <span>소식 받기 · 기본 모양</span>
  </label>
  <label class="option" for="terms">
    <input class="custom" type="checkbox" id="terms" name="terms" value="yes" required>
    <span>이용 조건 동의 · 사용자 지정 모양</span>
  </label>
  <label class="option disabled" for="locked">
    <input class="custom" type="checkbox" id="locked" checked disabled>
    <span>변경할 수 없는 선택</span>
  </label>
  <button type="submit">선택값 확인</button>
</form>
</body>
</html>

첫 항목은 브라우저 기본 체크박스에 색을 지정하고, 두 번째는 appearance: none으로 테두리와 배경·체크 표시를 직접 그립니다. disabled 항목은 선택되어 있어도 바꿀 수 없습니다. 각 라벨의 글자를 눌러도 해당 체크박스가 전환되어야 합니다.

Tab으로 이동하면 포커스 윤곽선이 나타납니다. Space로 선택을 바꾸고 다시 눌러 해제해 보세요. 비활성 항목은 일반 Tab 이동에서 건너뜁니다. 두 번째 필수 항목을 선택하지 않은 채 버튼을 누르면 브라우저의 필수 입력 검사가 작동합니다. 선택한 뒤 제출하면 이 연습 페이지가 다시 열리며 주소의 query에 terms=yes 같은 선택값이 붙습니다. 실제 서버에 저장하는 예제는 아닙니다.

선택·포커스·비활성 상태를 함께 설계하기

:checked는 현재 선택된 상태, :focus-visible은 키보드 조작 등에서 포커스 표시가 필요한 상태를 꾸밉니다. outline을 무조건 제거하지 말고 배경과 구별되는 표시를 남기세요. 이 예제는 색뿐 아니라 체크 표시도 사용해 선택 여부를 구분합니다.

label의 for 값과 input의 id는 정확히 일치하고, id는 문서 안에서 중복되지 않아야 합니다. 입력 요소를 label 안에 넣는 연결 방식도 함께 사용했습니다. 화면에 보이는 문구가 체크박스의 이름이 되므로 빈 라벨이나 의미 없는 기호만 사용하는 방식은 피합니다. 라벨에 클릭 영역을 확보하고 긴 문구가 모바일에서 자연스럽게 줄바꿈되는지 확인하세요.

강제 색상 모드에서는 사용자 지정 배경 이미지가 사라질 수 있습니다. 예제는 해당 조건에서 appearance: auto로 기본 컨트롤을 사용하도록 되돌립니다. 실제 서비스에서는 고대비·강제 색상 설정에서도 선택 상태와 포커스가 보이는지 대상 브라우저에서 확인해야 합니다. 이 예제의 CSS는 indeterminate 같은 추가 상태의 모양까지 구현한 것은 아닙니다.

색 변경 실습과 폼 값 확인하기

강조색을 바꾸려면 native의 accent-color와 custom:checked의 border-color·background-color를 함께 바꿉니다. 예를 들어 #176b86을 #7546a3으로 바꾼 뒤 선택 상태를 비교하고 원래 값으로 복원하세요. 테두리와 배경색을 바꿔도 실제 체크 값과 Space 조작은 유지되어야 합니다.

폼에 전송할 항목에는 name을 지정합니다. 체크된 활성 체크박스가 이름·값 쌍으로 전송되며, 선택하지 않은 체크박스는 일반적으로 그 항목 자체가 전송되지 않습니다. disabled 항목도 전송 대상에서 제외됩니다. 서버에서 선택하지 않은 상태를 처리할 때 값이 반드시 false라는 문자열로 온다고 가정하면 안 됩니다.

기본 색 지정은 MDN accent-color 문서, 모양 제어는 appearance 문서, 라벨·선택값·필수 입력은 HTML 체크박스 문서에서 확인할 수 있습니다.

CSS