Question

我一直在努力定制一个复选框。因为我修改为四舍五入，所以我无法取消选中该复选框以下代码有什么问题？

在Html中，

<div class="checkbox-circle">
    <input id="checkbox-1" type="checkbox" checked />
    <label for="checkbox-1">Checkbox 1</label>
</div>

在CSS中，

.checkbox-circle input[type="checkbox"] {
   display: none;
}
.checkbox-circle label {
   display: inline-block;
   cursor: pointer;
   position: relative;
   padding-left: 25px;
   margin-right: 12px;
}
.checkbox-circle label:before {
   content: '';
   display: inline-block;
   width: 15px;
   height: 15px;
   position: absolute;
   left: 0;  
   border: 1px solid #cccccc;
   border-radius: 3px;
}
.checkbox-circle input[type="checkbox"]:checked + label:before {
   font-size: 13px;
   color: #5bc0de;
   text-align: center;
   line-height: 11px;
   font-family: 'Glyphicons Halflings';
   content: "\e013";

}

它显示为我想要的但根本不可点击。在此先感谢-css。

Answer 1

您没有修改该复选框;你隐藏了复选框并添加了你自己的类似复选框的元素。因为隐藏了复选框，所以无法点击它，因此状态不会改变。

如果你想这样做，那么你需要添加一些Javascript来将隐藏复选框的状态链接到自定义复选框元素，并在单击元素时更改状态。

编辑：其实我错了，我忘了点击标签可以切换复选框的状态，哎呀。使用Javascript可能比隐藏复选框更容易。

Answer 2

问题是由于您使用display:none隐藏复选框而导致问题，并且它不适用于所有环境。

我建议您使用此代码实现更安全的实现：

.checkbox-circle input[type="checkbox"] {
    opacity: 0; // instead of display:none
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    z-index: 2; // or above
}

这个概念是让用户点击一个真实的不可见复选框，并像你一样使用:checked选择器传播样式。

unlickable checkbox - 仅限css

2 个答案: