radio按钮样式美化和checkbox按钮样式美化

思路：在原控件外模拟效果，隐藏原生控件。

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>