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

  • 相关阅读:
    C# 使用PictureBox控件--点击切换图片
    C# 点击窗口任意位置拖动
    File类
    Path类
    ArrayList集合-[习题]--C#
    ArrayList集合-[长度问题]--C#
    ArrayList集合--C#
    c# winform 弹出确认消息框判断是否删除?
    C# 文件与目录的基本操作(System.IO)
    SQL Server事务处理
  • 原文地址:https://www.cnblogs.com/mamimi/p/7419478.html
Copyright © 2011-2022 走看看