Bootstrap复选框和单选按钮美化插件(推荐)
作者:HCY__SH 发布时间:2023-07-02 05:24:53
标签:bootstrap,单选按钮,复选框
官网地址
需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。
checkboxs的样式
radio的样式
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复选框和单选按钮美化插件网站的支持!
来源:http://blog.csdn.net/a837756/article/details/53307093
0
投稿
猜你喜欢
- Python 对代码的缩进要求非常严格,同一个级别代码块的缩进量必须一样,否则解释器会报 SyntaxError 异常错误。在 Python
- 一、原理如题,我有一个模板课件.pptx:其内容:我想复制模板中间的某一页多次,比如复制第1页,然后复制3次,prs = Presentat
- /*********************************** 作者:trieagle(让你望见影子的墙) 日期:2009.8.1
- 一、os模块os.getcwd() 获取当前的工作目录os.chdir(‘绝对路径/相对于当前工作目录的路径&r
- 一. 抛出异常Python用异常对象(exception object)表示异常情况,遇到错误后,会引发异常。如果异常对象并未被处理或捕捉,
- 在使用javascript编程时浏览器中经常会遇到的两个麻烦,下面提供两个函数解决方式做参考,并提供一个demo让你更直观地了解我所说的这两
- Python3中configparser模块简介configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字
- # 2014.10.15 更新了memo.zip, 网盘的exe:修复:1.隔日启动不能正常加载json,加入:1.隐藏任务栏图标,2.通过
- 如果要用某个开源框架,需要安装多个依赖包可以如下操作:如依赖文件形式如下(可以不要版本号):txt文件名为requirements.txt,
- 像这种不能创建一个.frm 文件的报错好像暗示着操作系统的文件的权限错误或者其它原因,但实际上,这些都不是的,事实上,这个mysql报错已经
- 背景随着Web技术的发展和移动互联网的发展,Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?Hybrid
- 前言今天,我无聊的时候做了一个搜索文章的软件,有没有更加的方便快捷不知道,好玩就行了。基于Python tkinter 制作文章
- 前言今天我看到线性规划模型开头的介绍,特别不错,因此,我把它记录下来了,分享给大家在工程技术、经济管理、科学研究、军事作战训练及日常生活等众
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览,这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 索引和切片一维数组一维数组很简单,基本和列表一致。它们的区别在于数组切片是原始数组视图(这就意味着,如果做任何修改,原始都会跟着更改)。这也
- 双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个name属性,
- 1、matplotlib支持的颜色格式1.RGB 或者 RGBA 元组格式颜色元组中浮点型数值位于 [0, 1] 之间,e.g(0.1, 0
- 这篇文章主要介绍了python通过移动端访问查看电脑界面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 数字序号① ①② ②③ &
- 逢七拍腿游戏几个小朋友在一起玩逢七拍腿的游戏,从1开始数数,当数到7的倍数或者尾号是7时,拍一下腿。现在从1数到99,假设每个人都没有错,计