[CSS] 체크박스 이미지로 변경하기

투박한 체크박스를 요즘엔 잘 사용하지 않기 때문에

체크박스도 이미지화 시켜서 이쁘게 만들수 있다.

CSS 부분

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

input[type=checkbox] + label { 

display: inline-block; 

cursor: pointer; 

line-height: 22px; 

padding-left: 22px; 

background: url('/img/check_off.png') left/22px no-repeat; 

}

input[type=checkbox]:checked + label { background-image: url('/img/check_on.png'); }

HTML 부분

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

<input type="checkbox" id="box2"><label for="box2">동의합니다.</label>

<input type="checkbox" id="box3"><label for="box3">동의합니다.</label>

은근히 많이 사용하게 되니 기록을 해둔다.