纯css 更改原生raiod与 checkbox的样式

原文地址:

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    left:-9999px;
}
 .k-form {
     .k-form .checkbox, .k-form .radio {
         line-height: 25px;
         color: #0c4757;
         cursor: pointer;
         font-size: 13px;
     }
     k-form .radio {
         font-weight:400;
     }
     k-checkbox i, .k-radio i {
     position: absolute;
     top: 9px;
     left: 0;
     display: block;
     width: 14px;
     height: 14px;
     outline: 0;
     border:1px solid $panel-primary-heading-bg-color;
 }
     .k-radio i {
         border-color: $form-radio-checkbox-checked-color;
         transition: border-color .3s;
         -webkit-transition: border-color .3s;
         border-radius: 50%;
     }
     .k-checkbox input + i:after, .k-radio input + i:after {
        background-color: $form-radio-checkbox-checked-color;
         position: absolute;
         content: '';
         width: 6px;
         height:6px;
         top:50%;
         left:50%;
         margin-top:-3px;
         margin-left:-3px;
         background-color: $form-radio-checkbox-checked-color;
         border-radius: 50%;
         transition: opacity .1s;
         -webkit-transition: opacity .1s;
         transition: opacity .1s;
         -webkit-transition: opacity .1s;
        opacity: 0;
         filter:alpha(opacity=0);
     }
     .k-checkbox input:checked + i:after, .k-radio input:checked + i:after {
         opacity: 1;
         filter:alpha(opacity=1);
     }

}
<form class="form-horizontal k-form">
            <!--<div class="panel {{show.panelClass}}">-->
                <div ng-class="{true:'panel panel-info divOfModule',false:'panel panel-primary divOfModule'}[showPanelClass]">
                <div class="panel-heading"> 基本信息 </div>
                <div class="panel-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-1 control-label">用车性质</label>
                                <div class="col-sm-2">
                                    <label class="radio-inline k-radio">
                                        <input type="radio" name="inlineRadioOptions"  ng-model="billModel.carType" value="1"   ng-checked="billModel.carType==1" ng-click="changeType()"> 公司车
                                        <i></i>
                                    </label>
                                    <label class="radio-inline k-radio">
                                        <input type="radio" name="inlineRadioOptions"   ng-model="billModel.carType" value="2" ng-checked="billModel.carType==2" ng-click="changeType()"> 外请车
                                        <i></i>
                                    </label>

https://codepen.io/jcpplus/pen/ukvps?editors=1100