Question

我想查看复选框，到目前为止我发现了类似谷歌的内容。

HTML：

<div class="chkBoxSquared floatL">
    <input type="checkbox" value="None" id="squaredOne" name="check"/>
    <label for="squaredOne"><span>CheckMe</span></label>
</div>

CSS：

input[type=checkbox] {
    display: none;
}
.chkBoxSquared {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;

    margin-right: 120px;

    background: #202020;
    border: 1px solid #666666;
}

.chkBoxSquared label {
    cursor: pointer;
    position: absolute;
    padding-left: 40px;
    width: 120px;
    line-height: 30px;
}

.chkBoxSquared label:before {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;

    left: 2px;
    top: 2px;
    transition: all 0.5s ease-out;

}

.chkBoxSquared label:hover::before {
    background: #2d5d80;

}

.chkBoxSquared input[type=checkbox]:checked + label:before {
    background: #55bbff;
}

工作正常，但我的问题是 1）为什么：检查工作正常，即使我将该输入的显示设置为无？我也可以通过js查看复选框是否被选中。 2）当我点击那个＆＃34; CheckMe＆＃34;时，我应该做些什么改变来阻止它检查复选框。文本？我希望复选框仅在我点击它时起作用（删除＆＃34; for＆＃34;复选框的标签中断功能）

Answer 1

输入实际上不可见，它已经覆盖了.chkBoxSquared的样式，然后是标签上的:before伪元素，这是您实际可以看到的。要阻止它显示，您需要使用，以及复选框：

.chkBoxSquared {
    display:none;
}

Demo Fiddle

但是，因为这隐藏了父元素，所以标签也会被隐藏。

这实际上不是一个非常灵活的复选框重写实现，我很惊讶谷歌会使用它，最好将两个状态移动到伪元素，使用CSS：

Demo Fiddle

input[type=checkbox] {
    display: none;
}
.chkBoxSquared label {
    cursor: pointer;
    position: absolute;
    padding-left: 40px;
    width: 120px;
    line-height: 30px;
}
.chkBoxSquared label:after {
    position: absolute;
    content:"";
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    transition: all 0.5s ease-out;
}
.chkBoxSquared label:before {
    position: absolute;
    content:"";
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    transition: all 0.5s ease-out;
    background:#202020;
    border: 1px solid #666666;
}
.chkBoxSquared input[type=checkbox]:disabled + label:before, .chkBoxSquared input[type=checkbox]:disabled + label:after {
    display:none;
}
.chkBoxSquared label:hover::after {
    background: #2d5d80;
}
.chkBoxSquared input[type=checkbox]:checked + label:after {
    background: #55bbff;
}

<强> Then you can simply add disabled='true' to the checkbox to hide/show it

样式复选框。为什么：检查工作甚至输入的显示设置为无？

1 个答案:

Demo Fiddle

Demo Fiddle