라디오 체크박스 이미지 변경

- 기존에 사용하는 checkbox를 display:none;
- input label에 background-image를 이용하여 이미지 지정

- http://www.relation.co.kr/images_board/board_system_publishing/259/index.html

<style>
		*  { margin:0; padding:0; box-sizing: border-box; }
		.form1_wrap { margin:50px auto; max-width:500px; padding:20px; }
		.gbn     { display:block; width:100%; padding:3px 0 3px 0; margin-top:20px; }
		.gbn li  { display:inline-block; text-align:left; margin-right:15px; }
		.gbn li:last-child { margin-right:0px;	}
		.gbn li	input[type=checkbox] {	display:none;}
		.gbn li input[type=checkbox] + label { cursor: pointer; padding-left: 23px; background-repeat: no-repeat;	background-image: url('./img/checker-off.svg');	}
		.gbn li input[type=checkbox]:checked + label  { background-image: url('./img/checker-on.svg');  }
		.gbn li input[type=checkbox]:disabled + label { background-image: url('./img/checker-disabled.svg'); 	}
		.gbn li input[type=radio] { display:none; }
		.gbn li input[type=radio] + label {	cursor : pointer;		padding-left : 23px;	background-repeat: no-repeat;	background-image: url('./img/radio-off.svg');	}
		.gbn li input[type=radio]:checked + label  { background-image: url('./img/radio-on.svg'); }
		.gbn li input[type=radio]:disabled + label { background-image: url('./img/radio-disabled.svg'); }
</style>

 

<form name="form1" method="post" enctype="multipart/form-data" action="query.php">
			<div class="form1_wrap">
				<div class="gbn">
					<ul>
						<li><input type="checkbox" name="chkbox[]" value="chk1" id="chkbox1"><label for="chkbox1">체크1</label></li>
						<li><input type="checkbox" name="chkbox[]" value="chk2" id="chkbox2"><label for="chkbox2">체크2</label></li>
						<li><input type="checkbox" name="chkbox[]" value="chk3" id="chkbox3"><label for="chkbox3">체크3</label></li>
						<li><input type="checkbox" name="chkbox[]" value="chk4" id="chkbox4"><label for="chkbox4">체크4</label></li>
						<li><input type="checkbox" name="chkbox[]" value="chk5" id="chkbox5" disabled><label for="chkbox5">체크3</label></li>
					</ul>
				</div>
				<div class="gbn">
					<ul>
						<li><input type="radio" name="rdo_chk" id="rdo1" value="rdo1" ><label for="rdo1">라디오1</label></li>
						<li><input type="radio" name="rdo_chk" id="rdo2" value="rdo2" ><label for="rdo2">라디오2</label></li>
						<li><input type="radio" name="rdo_chk" id="rdo3" value="rdo3" ><label for="rdo3">라디오3</label></li>
					</ul>
				</div>
				<div class="gbn">
					<input type="hidden" name="hide_txt" value="숨김텍스트">
					<input type="hidden" name="mode" value="mode_a">
					<input type="button" name="btn" value="전송" onclick="send_it();" >
				</div>
			</div>	
</form>