自定义复选框不起作用答案

【问题标题】：Custom checkbox don't work自定义复选框不起作用
【发布时间】：2015-06-11 06:06:14
【问题描述】：

我正在使用 bootstrap 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 输入[type=checkbox] { 显示：无； }

如果我有很多错误，请耐心等待！这是我的第一个问题，我也是 html 的初学者。

谢谢！！

【问题讨论】：

你能用你的代码做一个jsfiddle吗？
由于您所做的事情与我最近所做的事情非常接近，这里的 a bootply 显示了我用于自定义复选框的 html 和 css，利用 bootstrap 和 fontawesome。

标签： html css forms twitter-bootstrap checkbox

【解决方案1】：

只是一个想法，但display: none; 不会阻止您甚至看到输入复选框吗？

【讨论】：

是的，'显示：无；'隐藏复选框。但在那之后，您使用 css 创建另一个。真的，我是这么认为的，但我不确定这一点。当我退出这条规则时，我有 2 个复选框：一个是默认复选框，另一个是风格化复选框。

【解决方案2】：

如果标签不在<label> 标签中，点击标签不会改变输入状态。您必须将 id 添加到复选框并将带有复选框 ID 的 for="" 属性添加到标签才能使其工作：

<div class="checkbox check-primary ">
    <input id="checkbox-1" type="checkbox" value="">
    <label for="checkbox-1">Guardar usuario</label>
</div>

【讨论】：