Bootstrap复选框和单选按钮美化插件(推荐)


Posted in Javascript onNovember 23, 2016

需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。

checkboxs的样式

Bootstrap复选框和单选按钮美化插件(推荐)

radio的样式

Bootstrap复选框和单选按钮美化插件(推荐)

radio样式

只要引入上面所说的文件之后,也可以自己定制样式,代码如下:

.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;<!--没选中时的边框颜色-->
border-radius: 3px;
background-color: #fff;<!--没选中时的颜色-->
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -19px;<!--可以改变“√”的位置-->
padding-left: 3px;<!--可以改变“√”的位置-->
padding-top: 1px;<!--可以改变“√”的位置-->
font-size: 13px;<!--选中后的中间打钩的字体大小(字体越大中间的勾越大越明显)-->
color: #FAD500;<!--选中后的中间打钩的颜色-->
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: black;
border-color: black;
}
.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before {
background-color: black;<!--选中后的背景颜色-->
border-color: black;<!--选中后的边框颜色-->
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
<div>
<div class="checkbox checkbox-circle">
<input id="radio1" class="styled" type="radio" name="radio">
<label for="radio1" class="font-bolder">
radio1
</label>
</div>
<div class="checkbox checkbox-circle">
<input id="radio2" class="styled" type="radio" name="radio">
<label for="radio2" class="font-bolder">
raido2
</label>
</div>
</div>

上面代码执行的效果

Bootstrap复选框和单选按钮美化插件(推荐)

以上所述是小编给大家介绍的Bootstrap复选框和单选按钮美化插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js DOM的学习笔记
Dec 22 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 #Javascript
移动开发之自适应手机屏幕宽度
Nov 23 #Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 #Javascript
jQuery-mobile事件监听与用法详解
Nov 23 #Javascript
jquery-mobile表单的创建方法详解
Nov 23 #Javascript
You might like
php使用json_encode对变量json编码
2014/04/07 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python开发之list操作实例分析
2016/02/22 Python
Flask数据库迁移简单介绍
2017/10/24 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python实现快递价格查询系统
2020/03/03 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
益模软件Java笔试题
2012/03/27 面试题
init进程的作用
2015/08/20 面试题
物业管理计划书
2014/01/10 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
教师教育心得体会
2016/01/19 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电