自定义复选框不起作用

问题描述：

我使用引导程序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 input [type = checkbox] { display：none; }

如果我有很多错误，请耐心等待！这是我的第一个问题，我也是在HTML中成长。

谢谢！

你可以请一个jsfiddle与你的代码？ – phts

既然你正在做的事情与我最近做的事情非常接近，这里是[bootply]（http://www.bootply.com/FExqgw7KZ2），显示了我用于自定义复选框的html和css，利用bootstrap和fontawesome 。 – Ted

答

点击标签不会改变输入的状态，如果它不在<label>标签中。你必须添加id的复选框，并与复选框ID属性for=""的标签，使这项工作：

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

我的上帝我浪费了很多时间直到找到这个......谢谢@CookieMan .. – Fergus

答

只是一个想法，但没有display: none;阻止你甚至可以看到输入复选框？

是的，'display：none;'隐藏复选框。但之后，你创建另一个使用CSS。真的，我认为，但我不确定这一点。当我得到这个规则时，我有2个复选框：一个是默认复选框，另一个是程式化复选框。 – GVF

自定义复选框不起作用

相关推荐