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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue prop属性传值与传引用示例
Nov 13 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
使用JavaScript破解web
2018/09/28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue v-for 使用问题整理小结
2019/08/04 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
javascript实现评分功能
2020/06/24 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python代码的打包与发布详解
2014/07/30 Python
python字符类型的一些方法小结
2016/05/16 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python中return self的用法详解
2018/07/27 Python
Django REST framework内置路由用法
2019/07/26 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
生产副总岗位职责
2013/11/28 职场文书
火车的故事教学反思
2014/02/11 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
javascript对象3个属性特征
2021/11/17 Javascript