2018-04-12
최근에는 이쁘고, 화려한 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>