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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 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 远程图片保存到本地的函数类
2008/12/08 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
python实现二叉查找树实例代码
2018/02/08 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Django框架模板用法入门教程
2019/11/04 Python
基于python实现学生信息管理系统
2019/11/22 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
工作中个人的自我评价
2013/12/31 职场文书
运动会演讲稿200字
2014/08/25 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python