HTML의 기본 체크박스와 라디오 버튼은 운영체제나 브라우저에 따라 모양이 달라지고 세부적인 스타일 조정이 거의 불가능합니다. 이럴 때 CSS를 활용하면 네이티브 입력 요소를 감추고 웹사이트 디자인에 어울리는 사용자 정의 체크박스를 손쉽게 구현할 수 있습니다.
구현 원리
사용자 정의 체크박스는 크게 세 단계로 만들 수 있습니다.
1. 네이티브 입력 요소 숨기기<input> 요소에 opacity: 0과 크기 0을 적용해 화면에서 보이지 않게 처리합니다. 요소가 DOM에는 그대로 남아 있으므로 클릭 동작과 키보드 접근성은 유지됩니다.
2. 시각적 체크박스 만들기<label> 안에 <span>을 배치해 실제 체크박스처럼 꾸밉니다. 라벨 전체가 클릭 영역이 되도록 cursor: pointer를 지정하면 사용성이 좋아집니다.
3. 선택 상태 스타일링:checked 가상 클래스와 일반 형제 결합자(~)를 조합해 체크 시 배경색을 초록색으로 바꾸고, ::after 가상 요소로 흰색 체크 표시를 그려줍니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
user-select: none;
}
.checkboxContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkboxMarked {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
background-color: rgb(5, 170, 32);
}
.checkboxMarked::after {
content: "";
position: absolute;
display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked::after {
display: block;
}
.checkboxContainer .checkboxMarked::after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
<input type="checkbox" checked>
<span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
<input type="checkbox">
<span class="checkboxMarked"></span>
</label>
</body>
</html>
출력 결과
위 코드를 실행하면 'Rice' 항목은 처음부터 선택된 상태로 초록색 배경과 함께 체크 표시가 나타나고, 'Flour' 항목은 회색 빈 박스로 표시됩니다. 마우스 포인터를 올리면 배경이 연한 녹색으로 변하며, 항목을 클릭할 때마다 체크 상태가 전환됩니다.
라디오 버튼으로 확장하기
동일한 기법을 라디오 버튼에도 적용할 수 있습니다. type="radio"로 변경한 뒤 외곽 박스에 border-radius: 50%를 적용해 원형으로 만들고, 체크 표시 대신 작은 원을 중앙에 배치하면 됩니다.
이 방식은 이미지나 아이콘 폰트 없이 순수 CSS만으로 동작하기 때문에 페이지 로딩 속도에 부담이 없으며, 브라우저마다 제각각인 기본 UI와 무관하게 일관된 디자인을 유지할 수 있다는 장점이 있습니다.