纯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:;
}
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
纯css 更改原生raiod与 checkbox的样式的更多相关文章
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- 纯css更改图片颜色的技巧
tips: JPG.PNG.GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色 .pic1 { background-image: url($img), linear-gradient ...
- 纯css修改单选、复选按钮样式
只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...
- 纯css改变下拉列表select框的默认样式
下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
随机推荐
- Keepalived + LVS/DR 安装配置
Keepalived + LVS/DR 说明 Keepalived:可以踢出掉故障服务 Keepalived:可以实现主从切换,解决单点故障 实验环境 四台主机:Linux Centos 6.4 32 ...
- 换行符在textarea、div、pre中的区别
关于换行符,网上有许多说法,IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号.经过本人正则匹配测试,chrome.firefox.safari.IE11都是\n, 因此保险起见,若 ...
- ACM训练小结-2018年6月16日
今天题目情况如下:A题:线段树+XOR性质.情况:由于写法问题,调试困难,浪费大量时间.B题:(对所有满足i mod p==q,求a[i]之和),无修改,直接上n*sqrt(n)的分块写法.情况:由于 ...
- eclipse 中英文切换
第一种方法: 在Eclipse安装目录下找到它的配置文件"eclipse.ini",用UE或者EditPlus等工具打开该配置文件,截图显示如下: 然后在最后一行添加如下相应命令: ...
- nginx的理解
1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端. 配置: 2.反向代理服务器 什么是反向代理? 客户端本来可以直 ...
- 修改jpivot源码实现分页
使用jpivot过程中,如果查询到的结果行数超过一个阈值,后面的显示就会丢失,这时需要分页显示. 假设应用中组装的MDX语句已经含有NON EMPTY,把空行直接过滤掉了. 这时需要修改的jpivot ...
- poj2442优先队列
感谢 http://hi.baidu.com/%C0%B6%C9%ABarch/blog/item/f9d343f49cd92e53d7887d73.html 的博主! 思路: 我们要找到n个smal ...
- gzip: stdin: unexpected end of file tar: Unexpected EOF in archive
1.问题描述: 今天解压tar包遇到这样一个问题 使用命令:tar -zxvf xxxxx.tar.gz gzip: stdin: unexpected end of filetar: Unexpe ...
- docker官方镜像库 搭建 jekins
先去docker hub 镜像官网下载jenkins 镜像(https://hub.docker.com/_/jenkins/): 其实就是在docker 中执行命令:docker pull jenk ...
- QT 多页面切换之QTabWidget
//mydialog.h #ifndef MYDIALOG_H #define MYDIALOG_H #include <QDialog> class QTabWidget; class ...