表单设计:

单选框修改默认样式：

html:（input隐藏，label显示需要显示的样式）

 

     
   
      
                 个人        
  
      
                 企业        
     

 

CSS:

.choseType{      padding: 0.32rem 0;      border-bottom:none;      li{        label {          padding-left: 0.5rem;          cursor: pointer;          background: url(../../../images/icon/gouxuan1@2x.png) no-repeat left center;          background-size: 0.5rem 0.5rem;          line-height: inherit;          margin-bottom: 0;          font-weight:400;          font-size: 0.3rem;        }        input{          &[type="radio"]{            display:none          }        }        a{          border:none;        }        &.active{          a{            border:none;          }          label{            background: url(../../../images/icon/gouxuan@2x.png) no-repeat left center;            background-size: 0.5rem 0.5rem;          }        }      }    }

JS:

$('label').click(function(){
      var radioId = $(this).attr('name');   $('input[type="radio"]').removeAttr('checked') ;   $('#' + radioId).attr('checked', 'checked');   if(radioId=="person"){
    $("#self").addClass("active").siblings().removeClass("active"); }else{
    $("#corporation").addClass("active").siblings().removeClass("active"); }  });