首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Bootstrap复选框未正常工作

Bootstrap复选框未正常工作
EN

Stack Overflow用户
提问于 2015-02-20 22:35:38
回答 5查看 21.4K关注 0票数 9

我正在使用下面的标记和样式(Bootstrap)。它显示我的复选框,但它是瘫痪的,也就是说,它不能被选中。这是我的加分:我想要更像Bootstrap的东西。我知道还有其他选项可以让复选框看起来很花哨,但这并不能解决问题。

代码语言:javascript
代码运行次数:0
运行
复制
<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里面,我会得到这个难看的东西:

EN

回答 5

Stack Overflow用户

发布于 2017-10-06 03:46:41

代码语言:javascript
代码运行次数:0
运行
复制
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>

问题出在你的标签上。for属性必须与标注的name属性匹配

票数 8
EN

Stack Overflow用户

发布于 2015-02-20 23:16:21

看起来需要调整自定义复选框的引导样式。

看看这个

HTML

代码语言:javascript
代码运行次数:0
运行
复制
<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>
</div

CSS

代码语言:javascript
代码运行次数:0
运行
复制
.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

票数 5
EN

Stack Overflow用户

发布于 2015-02-20 22:50:22

仔细阅读它,你看起来必须对选中的版本和未选中的版本进行样式设置。

代码语言:javascript
代码运行次数:0
运行
复制
input[type=checkbox]:checked {

}

使用此标记设置样式应该可以解决您的问题。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28631444

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档