zoukankan      html  css  js  c++  java
  • 纯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

  • 相关阅读:
    MVP模式
    开源代码SlidingMenu的使用
    常用命令(Linux、Android、adb)
    一文搞清楚Minor GC、Major GC 、Full GC 之间的关系
    阿里最新38道Java面试题解析(MyBatis+消息队列+Redis)
    从5个方面让你真正了解Java内存模型
    深入理解JVM:元空间大小详细解析
    面试必问:JVM类加载机制详细解析
    5个点彻底搞清楚SpringBoot注解
    8种创建Java线程的方式,你知道几个?
  • 原文地址:https://www.cnblogs.com/mamimi/p/7419478.html
Copyright © 2011-2022 走看看