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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue-cli3单页构建大型项目方案
Apr 07 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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文件上传实例详解!!!
2007/01/02 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP CURL使用详解
2019/03/21 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
django-filter和普通查询的例子
2019/08/12 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
门卫班长岗位职责
2013/12/15 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
全陪导游词开场白
2015/05/29 职场文书
如何写观后感
2015/06/19 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL