bootstrap美化复选框checkbox
文章描述：
Bootstrap如何自定义美化复选框checkbox按钮，把复选框更换成自己网站或者主题相同的颜色呢？
在使用bootstrap框架的时候，首先要引入bootstrap css、js、font文件还有jquery文件，代码如下：
<link rel="stylesheet" type="text/css" href="bootstrap3.3.7/css/bootstrap.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>html
首页用HTML制作一个复选框，第一个复选框是bootstrap默认的复选框，第二个是我们自定义的复选框
<div class="container">
<input type="checkbox" />
<div class="checkbox-custom checkbox-default">
<input type="checkbox" name="xy" class="chioseXy btn-primary" value="0" id="RememberMe">
<label for="RememberMe"> </label>
</div>
</div>css
bootstrap的复选框效果比HTML原来的效果好看，但是如何自定义修改bootstrap默认的复选框颜色呢？我们可以用css来自定义修改，代码如下：
.checkbox-custom {
position:relative;
padding:0 15px 0 5px;
margin-bottom:7px;
margin-top:11px;
display:inline-block;
float:left;
}
/*
将初始的checkbox的样式改变
*/
.checkbox-custom input[type="checkbox"] {
opacity:0;
/*将初始的checkbox隐藏起来*/
position:absolute;
cursor:pointer;
z-index:2;
margin:-6px 0 0 0;
top:50%;
left:3px;
}
/*
设计新的checkbox，位置
*/
.checkbox-custom label:before {
content:'';
position:absolute;
top:50%;
left:0;
margin-top:-9px;
width:19px;
height:18px;
display:inline-block;
border-radius:2px;
border:1px solid #bbb;
background:#f00;
}
/*
点击初始的checkbox，将新的checkbox关联起来
*/
.checkbox-custom input[type="checkbox"]:checked +label:after {
position:absolute;
display:inline-block;
font-family:'Glyphicons Halflings';
content:"\e013";
top:42%;
left:3px;
margin-top:-5px;
font-size:11px;
line-height:1;
width:16px;
height:16px;
color:#fff;
}
.checkbox-custom label {
cursor:pointer;
line-height:1.2;
font-weight:normal;
/*改变了rememberme的字体*/
margin-bottom:0;
text-align:left;
}
发布时间：2021/08/12
发表评论