自定义复选框不起作用

时间:2015-04-06 19:23:07

标签: html css forms twitter-bootstrap checkbox

我使用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] {       display:none;     }

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

谢谢!

2 个答案:

答案 0 :(得分:7)

如果标签不在<label>标签中,则点击标签不会更改输入状态。您必须将id添加到复选框,并使用复选框ID将for=""属性添加到标签中以使其正常工作:

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

答案 1 :(得分:0)

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