为什么 bootstrap 在此面板中我的复选框周围包含一个矩形框？

Question

Bootstrap 在此 jsFiddle Example 中包含一个围绕复选框的矩形。我是否错误地使用了标记或者是否有解决方法？

<form class="form-horizontal" role="form">
    <div class="form-group form-group-lg">
        <label for="cbLabel" class="col-sm-3 control-label">Label:</label>
        <div class="col-sm-3">
            <input type="checkbox" id="cbLabel" class="form-control" />
        </div>
    </div>
</form>

Answer 1

将自定义 class 添加到 form-control 元素（在我的示例中为 .fix）和一些自定义样式以覆盖 Bootstrap 的样式。

.fix {
 -webkit-box-shadow: none;
 box-shadow: none;
}

.fix:focus {
-webkit-box-shadow: none;
box-shadow: none;
}

HTML

<input type="checkbox" id="cbLabel" class="form-control fix">

样本：http://www.bootply.com/61qJqP5whr

为什么 bootstrap 在此面板中我的复选框周围包含一个矩形框？

Why does bootstrap include a rectangle box around my checkbox in this panel?

twitter-bootstrap-3