Bootstrap复选框未正常工作
Bootstrap复选框未正常工作
提问于 2015-02-20 22:35:38
我正在使用下面的标记和样式(Bootstrap)。它显示我的复选框，但它是瘫痪的，也就是说，它不能被选中。这是我的加分:我想要更像Bootstrap的东西。我知道还有其他选项可以让复选框看起来很花哨，但这并不能解决问题。
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
</div>
</div>
这是它看起来的样子。
到底是什么问题呢？如果我把input元素放在label里面，我会得到这个难看的东西：
回答 5
Stack Overflow用户
发布于 2017-10-06 03:46:41
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>问题出在你的标签上。for属性必须与标注的name属性匹配
Stack Overflow用户
发布于 2015-02-20 23:16:21
看起来需要调整自定义复选框的引导样式。
看看这个
HTML
<div class="form-group">
<div class="checkbox">
<label for="check">
<input type="checkbox" id="check"/>
<span class="fake-input"></span>
<span class="fake-label">Option 2</span>
</label>
</div>
</divCSS
.fake-input {
float: left;
width: 20px;
height: 20px;
border: 1px solid #9f9f9f;
background: #fff;
vertical-align: middle;
position: relative;
margin-right: 10px;
border-radius: 4px;
}
input[type="checkbox"] {
position: fixed;
top: -9999px;
left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
content:"\2713";
position: absolute;
color: #000;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}签入Fiddle
Stack Overflow用户
发布于 2015-02-20 22:50:22
仔细阅读它，你看起来必须对选中的版本和未选中的版本进行样式设置。
input[type=checkbox]:checked {
}使用此标记设置样式应该可以解决您的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28631444
复制相关文章
相似问题
腾讯云开发者
