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库(迷你版)--自建js库总结
Nov 21 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
值得分享的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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP里的中文变量说明
2011/07/23 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php jsonp单引号转义
2014/11/23 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
产品质量承诺范本
2014/03/31 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
鲁迅故居导游词
2015/02/05 职场文书
环卫工作个人总结
2015/03/04 职场文书
工作报告范文
2019/06/20 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android