사람들이 이전에 라디오 버튼과 다중 선택 버튼에 스타일을 추가하는 방법과 버튼을 더 크게 만드는 방법에 대해 묻는 것을 본 적이 있습니다. 아래에 제가 만든 예를 공유하겠습니다. 1. 먼저 버튼을 그림으로 만들어주세요 2.html페이지 복사 코드 코드는 다음과 같습니다. 메타 http-equiv ="Content-Type" content="text/html; charset=utf-8" /> <br>$(function(){ <br>$("input[type='checkbox']"). click(function( ){ <br>if($(this).is(':checked')){ <br>$(this).attr("checked","checked"); <br>$(this ).parent( ).removeClass("c_off").addClass("c_on"); <br>}else{ <br>$(this).removeAttr("checked") <br>$(this).parent ().removeClass ("c_on").addClass(" c_off"); <br>} <br>}) <br>$("input[type='radio']").click(function(){ <br>$ ("input[type='radio']").removeAttr("checked") <br>$(this).attr("checked","checked") <br>$(this) .parent() .removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off") <br>}); <br>< /script> <br></head> <br><style> <br>/* 다중 선택/단일 선택*/ <br>표시: 블록; : 포인터; <br> 줄 높이: 26px; <br> 너비: 26px; <br> 높이: 26px; <br>} <br> { <br>padding-top: 18px; <br>border-top: 1px solid #049CDB; <br>.label_check 입력, .label_radio 입력 { <br>margin-right: 5px; <br>.lblby .label_check, .lblby .label_radio { <br>여백-오른쪽: 8px; <br>} <br>.lblby .label_radio, .lblby .label_check { <br>배경: url(../images /jxc_btn.png) 반복 없음; <br>} <br>.lblby .label_check { <br>배경 위치: 0 0px <br>} <br>.lblby label.c_on { <br>배경 위치: 0 -26px; <br>} <br>.lblby .label_radio { <br>배경 위치: 0 -52px; <br>} <br>.lblby label.r_on { <br>배경 위치: 0 -78px ; <br>} <br>.lblby .label_check 입력, .lblby .label_radio 입력 { <br>위치: 절대 <br>왼쪽: -9999px <br></style> <body class="lblby"> <br><label for="checkbox-01" class="label_check c_on"> <br>< ;input type="checkbox" selected="checked" value=" 1" id="checkbox-01" name="sample-checkbox-01" /> <br>Checkbox1 <br><input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> <br>Checkbox2</label> <br><label ="radio-01" class="label_radio r_on"> <br><input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" / > <br>라디오1 </label> <br><label for="radio-02" class="label_radio r_off"> <br> <input type="radio" value="1" id= "radio-02" name="sample-radio" /> <br>Radio2 </label><br><label for="radio- 03" class="label_radio r_off"> input type="radio" value="1" id="radio-03" name="sample-radio" /> <br>Radio3 </ label> <br></body> /html> <br><br> </div>