以前、ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねている人を見かけました。以下に私が作成した例を共有しましょう。 1. まずボタンを画像にします 2.html ページ をコピーしますコード コードは次のとおりです。 <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"); ().removeClass ("c_on").addClass(" c_off"); <br>} <br>}); <br>$("input[type='radio']").click(function(){ <br>$ ("input[type='radio']").removeAttr("チェック済み"); <br>$(this).attr("チェック済み","チェック済み"); .parent() .removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off"); <br>}); 🎜>< /script> <br><style> <br>/* 複数選択/単一選択*/ <br>display: block; : ポインタ; <br> 行の高さ: 26 ピクセル; <br> 幅: 26 ピクセル; <br> .radios { <br>padding-top: 18px; <br>border-top: 1px ソリッド #049CDB; <br>.label_check 入力、.label_radio 入力 { <br>margin-right: 5px; <br>.lblby .label_check, .lblby .label_radio { <br>margin-right: 8px; <br>} <br>.lblby .label_radio, . lblby .label_check { <br>background: url(../images) /jxc_btn.png) no-repeat; <br>} <br>.lblby .label_check { <br>背景位置: 0 0px <br>} <br>.lblby label.c_on { <br>背景位置: 0 -26px; <br>.lblby .label_radio { <br>背景位置: 0 -52px; <br>} <br>. ; <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 </label> <br>< label for="checkbox-02" class="label_check"> <br><input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> <br>Checkbox2</label> <br><ラベル="radio-01" class="label_radio r_on"> <br><input type="radio" value="1" selected="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>