홈페이지 소스
[소스] 이미지 라디오 체크박스
작성자
꿘쓰
작성일/수정일
2021-07-27 12:42:47 / 2022-07-12 12:42:47
라디오 체크박스 이미지 변경
- 기존에 사용하는 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>