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

來源:互聯網
上載者:User

標籤:point   font   filter   border   als   logs   cli   div   lte   

原文地址:

.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的樣式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.