[CSS] label for을 이용한 라디오, 체크박스 버튼 on, off

라디오버튼과 체크박스를 이미지로 대체해야할 경우 label에 for을 이용하여 사용

HTML

CSS

input[type="radio"]{display:none;}
input[type="checkbox"]{display:none;}
label{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-size:20px auto;}
.r{background-image: url("images/r.gif");}
input:checked + label.r{background-image: url("images/r_on.gif");}
.ck{background-image: url("images/c.gif");}
input:checked + label.ck{background-image: url("images/c_on.gif");}