单选框修改默认样式

表单设计:

单选框修改默认样式：

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

 

<ul class="nav nav-tabs choseType" role="tablist">
   <li role="presentation" class="active">
      <a href="javascript:void(0)" aria-controls="home" role="tab" data-toggle="tab">
           <input type="radio" name="type" id="person"><label name="person" for="type">个人</label>
      </a>
  </li>
  <li role="presentation">
      <a href="javascript:void(0)" aria-controls="profile" role="tab" data-toggle="tab">
           <input type="radio" name="type" id="company"><label name="company" for="type">企业</label>
      </a>
  </li>
</ul>

 

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"); }
 });

转载于:https://www.cnblogs.com/taokele/p/8074026.html