css - 不可点击的复选框 - 仅限 css

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

问题是由于您使用 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 选择器传播样式。