思路：在原控件外模拟效果，隐藏原生控件。
1 radio按钮样式美化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pay_list_c1 { 8 width: 24px; 9 height: 18px; 10 float: left; 11 padding-top: 3px; 12 cursor: pointer; 13 text-align: center; 14 margin-right: 10px; 15 background-image: url(images/inputradio.gif); 16 background-repeat: no-repeat; 17 background-position: -24px 0; 18 } 19 .radioclass { 20 opacity: 0; 21 cursor: pointer; 22 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 23 filter: alpha(opacity=0); 24 } 25 .on { 26 background-position: 0 0; 27 } 28 </style> 29 </head> 30 <body> 31 <span class="pay_list_c1"> 32 <input type="radio" checked="checked" name="paylist" value="1" class="radioclass"> 33 </span> 34 <span class="pay_list_c1"> 35 <input type="radio" checked="checked" name="paylist" value="1" class="radioclass"> 36 </span> 37 <script src=jquery.min.js> 38 39 </script> 40 <script> 41 $(".pay_list_c1").on("click",function(){ 42 $(this).addClass("on").siblings().removeClass("on"); 43 }) 44 </script> 45 </body> 46 </html>
所用到的图片：
直接复制即可
2 checkbox按钮样式美化
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .piaochecked { 8 width: 20px; 9 height: 20px; 10 float: left; 11 cursor: pointer; 12 margin-left: 10px; 13 text-align: center; 14 background-image: url(images/checkbox_01.gif); 15 background-repeat: no-repeat; 16 background-position: 0 0; 17 } 18 19 .on_check { 20 background-position: 0 -21px; 21 } 22 .radioclass { 23 opacity: 0; 24 cursor: pointer; 25 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 26 filter: alpha(opacity=0); 27 } 28 </style> 29 </head> 30 <body> 31 <div class="piaochecked on_check"> 32 <input name="need_inv" type="checkbox" style="height:20px;20px;" class="radioclass" value="1"> 33 </div> 34 <div class="piaochecked on_check"> 35 <input name="need_inv" type="checkbox" style="height:20px;20px;" class="radioclass" value="1"> 36 </div> 37 <script src=jquery.min.js></script> 38 <script> 39 $(".piaochecked").on("click",function(){ 40 $(this).hasClass("on_check")? $(this).removeClass("on_check"):$(this).addClass("on_check"); 41 //或者这么写 42 // $(this).toggleClass( "on_check" ); 43 }) 44 </script> 45 </body> 46 </html>