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 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
VUE安装使用教程详解
Jun 03 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python笔记之facade模式
2019/11/20 Python
python实现井字棋小游戏
2020/03/04 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
俞敏洪北大演讲稿
2014/05/22 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
小学优秀学生评语
2014/12/29 职场文书
党支部书记岗位职责
2015/02/15 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
win10搭建配置ftp服务器的方法
2022/08/05 Servers