CSS - checkbox를 이미지로 꾸미고 동작시키기(label, CSS Trick)

checkbox는 자주사용하는 html tag이지만 브라우저별로 약간의 사이즈 차이와 이미지가 차이가 있다보니 css를 통해 통일화를 시키고 싶지만 CSS를 통해 checkbox를 꾸미는것은 불가능하기 때문에 이미지로 대체하여 동작시키는 경우가 많다.

 

label태그를 사용하면 checkbox를 꾸밀 수 있는데 코드는 아래와 같다.

 

checkbox.html

<input type="checkbox" id="myCheck">
<label for="myCheck"></label>

id를 지정해주고 label태그는 바라볼 checkbox와 연결해준다.

 

 

css

input[type="checkbox"]+label {
    display: block;
    width: 24px;
    height: 24px;
    background: url('./images/check-off.png') no-repeat 0 0px / contain;
}

input[type='checkbox']:checked+label {
    background: url('./images/check-on.png') no-repeat 0 1px / contain;
}

input[type="checkbox"] {
    display: none;
}

+를 통해 바로 뒤에 오는 label태그를 같이 선택시킨다.

그런 다음 기본이미지("체크되지 않은 이미지")를 배경으로 처리하고 :checked속성을 추가하여 선택된 이미지("체크 이미지")를 넣는다.

 

마지막에 원래 이미지인 checkbox는 숨긴다.

 

동작정보

이미지로 대체된 기본 체크박스

변경된 체크박스