순수 CSS만으로 체크박스와 라디오 버튼 커스터마이징하는 방법

폼(form)을 만들다 보면 사용자 선호도 수집, 약관 동의 여부 확인, 인구통계 정보 입력 등을 위해 체크박스와 라디오 버튼 입력 요소를 사용해야 할 때가 많습니다. HTML의 체크박스나 라디오 버튼은 각각 기본 스타일이 적용되어 있는데, CSS를 활용하면 원하는 모양으로 자유롭게 커스터마이징할 수 있습니다. 이 글에서는 폼이나 웹 페이지에 바로 적용할 수 있는 체크박스와 라디오 버튼 커스텀 방법을 예제와 함께 단계별로 살펴보겠습니다.

HTML 구조 잡기

체크박스와 라디오 버튼 모두 스타일링의 대상이 되는 HTML 골격 코드는 거의 동일합니다.

체크박스/라디오 버튼 하나의 메인 컨테이너 역할은 HTML label 요소가 담당합니다. label 내부에는 적절한 type 속성을 가진 input 요소와, 선택 여부를 시각적으로 표시해 줄 span 요소가 들어갑니다.

<html>
<head>
 
  <style>
    /* 아직 CSS 없음 */
  </style>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 </body>
</html>

위 마크업에서 첫 번째 입력 그룹은 라디오 버튼입니다. 라디오 버튼은 여러 선택지 중 단 하나만 선택해야 하는 폼에서 사용합니다.

두 번째 그룹은 체크박스입니다. 체크박스는 사용자가 여러 항목을 자유롭게 복수 선택할 수 있어야 하는 경우에 쓰이며, 동의/비동의처럼 단순히 예/아니오를 고르는 상황에서도 활용됩니다.

이런 HTML 요소들은 기본 외형을 가지고 있지만, CSS를 사용하면 원하는 스타일로 얼마든지 바꿀 수 있습니다.

CSS 설정하기

라디오 버튼이나 체크박스의 스타일을 변경하려면 문제를 다음과 같은 단계로 나누어 접근해야 합니다.

label 커스터마이징
1. display 속성
2. position: relative
3. cursor: pointer
4. 보기 좋은 배치를 위한 margin과 padding
브라우저 기본 체크박스 숨기기
1. display 속성
커스텀 체크박스가 될 컨테이너 만들기
1. 높이(height)
2. 너비(width)
3. 배경(background)
4. position – absolute
5. top, left 값 지정
호버(hover) 시 특별한 효과 추가 (예: 체크박스 배경색 변경)
체크되었을 때 배경색 변경
체크되지 않았을 때 체크마크 또는 원 숨기기
체크되었을 때 체크마크 또는 원 표시
체크마크 스타일링
원(라디오 버튼) 스타일링

아래 코드를 확인하기 전에, 위의 HTML 골격과 문제 해결 단계를 참고해 스스로 먼저 구현해 보는 것을 추천합니다. 직접 시도해 보면 CSS 선택자와 속성에 대한 이해가 훨씬 깊어집니다.

완성 코드:

<html>
<head>
 
 <style>
  /* label(input) 커스터마이징 */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* 브라우저 기본 체크박스 숨기기 */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* 커스텀 체크박스 컨테이너 생성 */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* 라디오 버튼용 border-radius 추가 */
.circle {
 border-radius: 50%;
}
 
/* 마우스 오버 시 배경색 변경 */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* 체크되었을 때 파란 배경 적용 */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* 체크마크/원 생성 (체크 전에는 숨김) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* 체크되었을 때 체크마크 표시 */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* 체크마크 스타일링 */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* 필요하면 CSS 벤더 프리픽스 사용 여부를 항상 확인하세요 */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* 라디오 버튼 원 스타일링 */
label .circle:after {
 width: 15px;
 height: 15px;
 /* .circle과 .checkmark는 사실상 같은 요소이므로,
    border를 none으로 하지 않으면 불필요한 체크마크가 화면에 나타납니다 */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

이것으로 CSS로 구현하는 라디오 버튼과 체크박스 예제를 마쳤습니다. 처음에는 다소 복잡하게 느껴질 수 있지만, 몇 번만 반복해서 연습하면 금방 익숙해질 것입니다. 이 정도의 CSS 실습을 무사히 완료했다면, 이제 더 어렵고 심화된 주제로 나아갈 준비가 된 것입니다.