Html 使用CSS3切换div as复选框

我试图重新设计我的html复选框，但是。。。可能是出了什么问题，而且它并没有真正起作用。 我的HTML代码是：

<div class="checkit">
    <label for="checkbox-1">
        <i class="icon-check"></i>
    </label>
    <input type="checkbox" id="checkbox-1" />
</div>

我想做的是，显示一个V符号(✔) 当按下主框（选中）时，如果未按下，则隐藏（使用显示css） （注意：图标检查类是我的v符号，使用网站的字体图标。因为我不能在这里使用字体-没有上传的地方-我将在演示中显示默认的检查符号）

下面是演示的JSFIDLE链接：

我也在考虑改用javascript切换，但我希望它是纯css3

任何帮助都是非常感激的

---

谢谢！

您必须将输入放在前面。请查看此处的工作片段。使用以下方法：

。检查它{
显示：块；
背景：#ffffff；
边框：1px实心#e8e8e8；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
宽度：18.9px；
高度：17.8px；
光标：指针；
}
.勾选：悬停{
边框：1px实心#C0C0；
}
.检查：活动{
-webkit盒阴影：插图0px 0px 5px#7c7c；
-moz盒阴影：插入0px 0px 5px#7c7c；
盒影：插入0px 0px 5px#7c7c；
}
.检查一下{
颜色：#a3ec15；
字体大小：23px；
位置：绝对位置；
文本阴影：0px 0px 5px#eaeaea；
利润率：-5px-8.9px；
显示：无；
}
.checkit输入[type=“checkbox”]{
/*可见性：隐藏；
宽度：0px；
高度：0px*/
}
.检查标签{
游标：继承；
显示：块；
宽度：100%；
身高：100%；
}
.图标检查：之后{
内容：“✔";
字体系列：Arial；
}
.checkit输入[type=“checkbox”]：选中+标签i{
显示：块；
}
.checkit输入[type=“checkbox”]：未（：选中）+标签i{
显示：无；
}
.checkit输入[type=“checkbox”]{显示：无；}

只是一个小小的吹毛求疵：这里的输入需要放在前面，因为OP使用的是CSS。如果您使用合适的CSS，复选框（hack）也会在标签后面处理输入。@TylerH是的，我知道！

：D

这也适用于单选按钮吗？再次感谢：）

.checkit {
    display:block;
    background:#ffffff;
    border:1px solid #e8e8e8;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    width:18.9px;
    height:17.8px;
    cursor:pointer;
}

.checkit:hover {
    border:1px solid #c0c0c0;
}

.checkit:active {
    -webkit-box-shadow:inset 0px 0px 5px #7c7c7c;
    -moz-box-shadow:inset 0px 0px 5px #7c7c7c;
    box-shadow:inset 0px 0px 5px #7c7c7c;
}

.checkit i {
    color:#a3ec15;
    font-size:23px;
    position:absolute;
    text-shadow:0px 0px 5px #eaeaea;
    margin:-5px -8.9px;
    display:none;
}

.checkit input[type="checkbox"] {
    visibility:hidden;
    width:0px;
    height:0px;
}

.checkit label {
    cursor:inherit;
    display:block;
    width:100%;
    height:100%;
}

.checkit input[type="checkbox"]:checked + label i {
    display:block;
}

.checkit input[type="checkbox"]:not(:checked) + label i {
    display:none;
}