최근에는 이쁘고, 화려한 javascript 플러그인들이 많아서, 굳이 아래와 같이 만들 필요가 없긴 하지만, 그래도 가끔 이런 것을 적용 해야 되는 경우가 있어서 포스팅해 둔다.
간단히 css와 이미지 2개로 구현 할 수 있다.
<style>
.ccheck input[type="checkbox"] {
display:none;
}
.ccheck label{
width:100%;
height:20px;
}
.ccheck input[type="checkbox"] + label .chk_img {
padding:0 0 0 30px;
height:20px;
background:url("/post_inc/images/check01_off.png")no-repeat;
cursor:pointer;
}
.ccheck input[type="checkbox"]:checked + label .chk_img {
background:url("/post_inc/images/check01_on.png")no-repeat;
}
</style>
<div class="ccheck">
<input type="checkbox" id="check_test">
<label for="check_test">
<div class="chk_img">체크</div>
</label>
</div>