I have seen people asking before, how to add styles to radio buttons and multi-select buttons, and how to make the buttons larger? Let me share an example I made below. 1. First make the button into a picture 2.html page Copy code The code is as follows: <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>}); <br>< /script> <br></head> <br><style> <br>/* Multiple selection/single selection*/ <br>label { <br>display: block; <br>cursor: pointer; <br>line-height: 26px; <br>margin-bottom: 20px; <br>width: 26px; <br>height: 26px; margin-top: 6px; <br>} <br>.radios { <br>padding-top: 18px; <br>border-top: 1px solid #049CDB; <br>} <br>.label_check input, .label_radio input { <br>margin-right: 5px; <br>} <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>background-position: 0 0px <br>} <br>.lblby label.c_on { <br>background-position: 0 -26px; <br>} <br>.lblby .label_radio { <br>background-position: 0 -52px; <br>} <br>. lblby label.r_on { <br>background-position: 0 -78px; <br>} <br>.lblby .label_check input, .lblby .label_radio input { <br>position: absolute; <br>left: -9999px; <br>} <br></style> <br><body class="lblby"> <br><label for="checkbox-01" class="label_check c_on"> <br>< ;input type="checkbox" checked="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><label for="radio-01" class="label_radio r_on"> <br><input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" /> <br>Radio1 </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"> <br><input type="radio" value="1" id="radio-03" name="sample-radio" /> <br>Radio3 </ label> <br></body> <br></html> <br><br> </div>