1. 程式人生 > >純css 更改原生raiod與 checkbox的樣式

純css 更改原生raiod與 checkbox的樣式

out edi val editor city border head lte pri

原文地址:

.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

純css 更改原生raiod與 checkbox的樣式