原文地址:

.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的样式的更多相关文章

  1. 用纯css改变下拉列表select框的默认样式(转)

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  2. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  3. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  4. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  5. 纯css更改图片颜色的技巧

    tips: JPG.PNG.GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色 .pic1 {     background-image: url($img), linear-gradient ...

  6. 纯css修改单选、复选按钮样式

    只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...

  7. 纯css改变下拉列表select框的默认样式

    下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...

  8. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  9. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

随机推荐

  1. 【Head First Servlets and JSP】笔记3:Servlet的生命周期

    1.servlet的存在就是要为客户服务.servlet的任务就是得到一个用户的请求,再发回一些响应. 请求可能很复杂,也可能很简单,例如,“为我的购物车结账”,这个请求携带了一些重要的数据,你必须知 ...

  2. 【Flask】ORM关系以及一对多

    ### ORM关系以及一对多:mysql级别的外键,还不够ORM,必须拿到一个表的外键,然后通过这个外键再去另外一张表中查找,这样太麻烦了.SQLAlchemy提供了一个`relationship`, ...

  3. 超酷Loading进度条

    在线演示 本地下载

  4. tophat的用法

    概述:tophat是以bowtie2为核心的一款比对软件. tophat工作分两步: 1.将reads用bowtie比对到参考基因组上. 2.将unmapped-reads打断成更小的fragment ...

  5. C语言中static的使用方法【转】

    本文转自:http://blog.csdn.net/renren900207/article/details/21609649 全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量 ...

  6. PHP开发环境MAMP for Windows

    Windows上的整合PHP开发环境有很多,如:Windows上使用的Wampserver(http://www.wampserver.com/),跨平台的Xampp(https://www.apac ...

  7. 在环境变量里设置VI中TAB缩进

    终端上的tab键默认是缩进8个空格的(记住8个空格不等于一个tab, tab和空格不是一个概念) 一般设置vim的tab(制表符)的缩进的时候都这样:set tabstop=4 ” 表示让tab的宽度 ...

  8. 在移动端做查看日志信息的js

    Vconsole.js下载这个js引入需要使用的html文件,当运行到页面是就会在右下角显示提示,点击就出出现像pc端上的控制台页面 在线查看的网址 http://console.hongliang. ...

  9. QT QStringListModel 示例代码

    1.  QStringListModel , 实现 插入 删除 编辑 list,支持鼠标双击编辑. 2. dialog.h #ifndef DIALOG_H #define DIALOG_H #inc ...

  10. 查看后台PHP进程(非PHP-FPM)

    ps -ef | grep php | grep -v php-fpm