修改radio的默认样式

最近在进行页面改版的时候越到了需要修改radio的样式的问题，发现纯的css很难的改变浏览器的默认样式。最后选择了span+js来实现

html:

<input type="radio"/>

 

css:

span.radioType {​
 
　　display: inline-block;

　　width: 13px;

　　height: 13px;

　　background-image:url("../images/radio.png");

　　background-repeat: no-repeat;

　　cursor: pointer;

　　margin-right: 3px;

}​

span.radioType.backg {

​    background-position: 0px -15px;

}​

 

​js

     $(function() {

     //包裹

     $.each($('input[type="radio"]'),function(i,n){

          $(this).wrap("");

            if($(n).attr('checked')){

             $(n).parent('.radioType').first().addClass('backg');

             }

         });

       //点击后

       $('.radioType').click(function(){

             //调用点击事件

              $(this).children('input[type="radio"]')[0].click()；

             //移除所以name相同的  

             var name=$(this).children('input[type="radio"]').attr("name");

        $('.radioType').each(function(){

            if($(this).children('input[type="radio"]').attr("name")==name){

             $(this).children('input[type="radio"]').removeAttr('checked');   

             $(this).removeClass('backg');

         }

        })

            $(this).children('input[type="radio"]').attr('checked','checked');

            $(this).addClass('backg');

   });

     });

实现效果

点我查看效果