Bootstrap复选框和单选按钮美化插件(推荐)

作者:HCY__SH 时间:2023-07-02 05:24:53 

官网地址

需要引入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复选框和单选按钮美化插件网站的支持!

来源:http://blog.csdn.net/a837756/article/details/53307093

标签:bootstrap,单选按钮,复选框
0
投稿

猜你喜欢

  • Django中使用MySQL5.5的教程

    2024-01-22 09:53:35
  • python字典如何获取最大和最小value对应的key

    2021-07-10 11:14:22
  • VC基于ADO技术访问数据库的方法

    2024-01-28 22:25:08
  • django admin search_fields placeholder 管理后台添加搜索框提示文字

    2022-02-11 14:31:53
  • Windows下安装Django框架的方法简明教程

    2021-06-26 20:26:13
  • python 操作 mongodb 数据库详情

    2024-01-19 17:53:45
  • 创建Django项目图文实例详解

    2021-06-12 23:09:30
  • Python实现一个发送程序和接收程序

    2023-06-18 09:04:38
  • Python+Selenium+Pytesseract实现图片验证码识别

    2023-08-17 11:44:01
  • Linux 中PHP的安装教程

    2023-10-07 20:34:21
  • 关于Python常用函数中NumPy的使用

    2021-09-10 01:00:35
  • Python函数基础

    2022-09-11 11:36:43
  • asp.net下使用DbProviderFactories的数据库操作类

    2024-01-16 15:34:02
  • openai createChatCompletion函数使用实例

    2023-06-14 16:45:38
  • 一次性彻底讲透Python中pd.concat与pd.merge

    2023-02-06 19:04:33
  • vue watch监控对象的简单方法示例

    2024-05-05 09:11:00
  • 跟老齐学Python之变量和参数

    2023-01-12 22:23:31
  • eslint常见的一些报错及解决方法

    2024-05-11 09:09:32
  • Python-jenkins模块获取jobs的执行状态操作

    2022-07-29 14:15:09
  • python实现转盘效果 python实现轮盘抽奖游戏

    2023-03-06 00:00:57
  • asp之家 网络编程 m.aspxhome.com