我使用引导程序3和另一个css模板。我想使用模板来设置复选框的风格,并且它不起作用,因为我无法使用输入区域。当我点击它时,什么都没有出现。 这是代码:自定义复选框不起作用
HTML:
<div class="checkbox check-primary ">
<input type="checkbox" value="">
<label>Guardar usuario</label>
</div>
CSS:
.checkbox {
display: block;
min-height: 20px;
vertical-align: middle;
}
.checkbox input[type=checkbox] {
display: none;
}
.checkbox label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
margin-bottom: 6px;
color: #777a80;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
.checkbox label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 10px;
position: absolute;
left: 0px;
top: 1.4px;
background-color: #fff;
border: 1px solid #c2c6cb;
border-radius: 3px;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
.checkbox input[type=checkbox]:checked + label::after {
font-family: 'FontAwesome';
content: "\F00C";
}
.checkbox label::after {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 3.2px;
top: 0px;
font-size: 11px;
transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
这一切。当我得到这个规则时,复选框才会运行: .checkbox input [type = checkbox] { display:none; }
如果我有很多错误,请耐心等待!这是我的第一个问题,我也是在HTML中成长。
谢谢!
你可以请一个jsfiddle与你的代码? – phts
既然你正在做的事情与我最近做的事情非常接近,这里是[bootply](http://www.bootply.com/FExqgw7KZ2),显示了我用于自定义复选框的html和css,利用bootstrap和fontawesome 。 – Ted