🎨 커스텀 체크박스/라디오 버튼 만들기 – 실전 CSS 예제

🎨 커스텀 체크박스/라디오 버튼 만들기 – 실전 CSS 예제

브라우저 기본 체크박스와 라디오 버튼은 디자인 제어가 제한적입니다. 하지만 input 요소는 감추고, label과 가상 요소를 활용하면 디자이너가 원하는 형태로 자유롭게 꾸밀 수 있습니다.

---

1️⃣ 기본 체크박스의 구조

  
  동의합니다

👉 이 구조를 기반으로 input은 숨기고, label로 꾸미게 됩니다.

---

2️⃣ 커스텀 체크박스 예제

HTML:

  
  
  약관에 동의합니다

CSS:

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.custom-checkbox input {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #007bff;
  border-radius: 4px;
  position: relative;
  transition: background-color 0.3s ease;
}

.custom-checkbox input:checked + .checkmark {
  background-color: #007bff;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.2L3.5 7.7 2.5 8.7 6 12.2 14 4.2 13 3.2z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

✅ 체크 시 배경색과 체크 아이콘이 보이도록 처리합니다.

---

3️⃣ 커스텀 라디오 버튼 예제

HTML:

  
  
  빨강

CSS:

.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.custom-radio input {
  display: none;
}

.dot {
  width: 18px;
  height: 18px;
  border: 2px solid #dc3545;
  border-radius: 50%;
  position: relative;
}

.custom-radio input:checked + .dot::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #dc3545;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

✅ 라디오 버튼도 마찬가지로 내부의 점(dot)을 가상 요소로 표현합니다.

---

4️⃣ 접근성을 위한 팁

• <label>로 감싸야 클릭 영역 확대
• input을 display: none보다 opacity: 0; position: absolute;로 숨기면 키보드 포커스 가능
• aria-* 속성을 통해 스크린리더 지원 추가

---

📌 정리

• input은 숨기고, label + span 조합으로 커스텀
• :checked 상태를 활용해 스타일 토글
• 가상 요소(::after)로 체크/포인트 표현
• 접근성과 사용성 고려하여 label 및 키보드 포커스 처리

---

📌 다음 글 예고

다음 글: “스크롤바 디자인 커스터마이징 (웹킷 vs 크로스 브라우징 이슈)”에서는 브라우저별 스크롤바를 꾸미는 방법과 호환성 이슈를 정리합니다.