纯css 更改原生raiod与 checkbox的样式
2024-09-01 12:08:55
原文地址:
.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:;
}
k-checkbox i, .k-radio i {
position: absolute;
top: 9px;
left:;
display: block;
width: 14px;
height: 14px;
outline:;
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:;
filter:alpha(opacity=0);
}
.k-checkbox input:checked + i:after, .k-radio input:checked + i:after {
opacity:;
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
最新文章
- Java MD5机密算法的使用
- 《JavaScript高级程序设计》笔记整理
- Linux学习总结
- Asp.net MVC过滤器的使用
- Burp SuiteBurp Suite使用详解
- 20145320《Java程序设计》第二次实验报告
- .net和java和谐相处之安卓客户端+.net asp.net mvc webapi 2
- 用canvas实现图片滤镜效果详解之视频效果
- curl命令具体解释
- Oracle11g数据库安装
- 【BZOJ 2132】 圈地计划
- Android 添加子视图(addView和setView)
- [HDU 1358]Period[kmp求周期]
- Oracle压缩总结2— 估计表压缩效应
- Javascript中关于作用域和闭包和域解释的面试题
- ssr 服务端安装教程
- Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法
- php 微信调用扫一扫
- Linux - sort 排序
- spring事物的传播行为及隔离