Bootstrap：Invisible复选框，正常工作内部按钮

Question

在我的使用react-bootstrap npm包的React Meteor应用中，我试图找到一个看起来像按钮的复选框，based on the code here嵌套复选框input和{{1} } i元素中的元素

但是，以下代码会在按钮内显示一个带有复选框的按钮。

我们如何摆脱复选框，使按钮看起来像只有图标和文字的常规按钮？

label.btn

Answer 1

我们可以使用以下css隐藏此复选框，但继续执行正常操作：

label input[type="checkbox"] {
  position: fixed;
  z-index: -10;
  opacity: 0;
  left: 0;
  top: 0;
}

.custom-checkbox input[type="checkbox"] {
  position: fixed;
  z-index: -10;
  opacity: 0;
  left: 0;
  top: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <label class="btn btn-primary custom-checkbox">
    <i class="glyphicon glyphicon-envelope"></i>
    <input type="checkbox" /> Checkbox
  </label>
</form>