思路：在原控件外模拟效果，隐藏原生控件。
1radio按钮样式美化
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>
所用到的图片：直接复制即可
2checkbox按钮样式美化
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;width:20px;" class="radioclass" value="1">33 </div>34 <div class="piaochecked on_check">35<input name="need_inv" type="checkbox" style="height:20px;width: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>
![[css] 如何修改美化radio checkbox的默认样式？](https://1500zi.500zi.com/uploadfile/img/14/889/d6c28408f78b640795e3bc1823dee199.jpg)
