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模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue iview实现动态新增和删除
Jun 17 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
用libtemplate实现静态网页生成
2006/10/09 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python3如何判断三角形的类型
2020/04/12 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
酒店副总岗位职责
2013/12/24 职场文书
英文导游欢迎词
2014/01/11 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技