不直接在输入后使用CSS访问复选框状态

我正在创建一个自定义复选框，并希望单击标签文本也可以切换状态，显示或不显示文本，这取决于仅使用CSS的复选框的状态。我写了这个html：

input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+。标签文本：在{
内容：“+”；
宽度：1米；
高度：1米；
显示：内联块；
右边距：5px；
}
输入[type=“checkbox”]：选中+。标签文本：之前{
内容：“-”；
}
标签输入[type=“checkbox”]：选中~.元素。是否未选中{
显示：无；
}
标签输入[type=“checkbox”]：未（：选中）~.元素已选中{
显示：无；
}

项目二
复选框已选中
复选框未选中

我重新安排了您的HTML结构，用

div class=“label”

替换了

label

该复选框不是使用

display:none

，而是使用

opacity

隐藏。然后你可以控制它所占据的区域

.label{
位置：相对位置；
显示：内联块；
}
输入[type=“checkbox”]{
不透明度：0；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
}
输入[type=“checkbox”]+。标签文本：在{
内容：“+”；
宽度：1米；
高度：1米；
显示：内联块；
右边距：5px；
}
输入[type=“checkbox”]：选中+。标签文本：之前{
内容：“-”；
}
输入[type=“checkbox”]：选中~.元素。未选中{
显示：无；
}
输入[type=“checkbox”]：未（：选中）~.元素。是否选中{
显示：无；
}

项目二
复选框已选中
复选框未选中

我重新安排了您的HTML结构，用

div class=“label”

替换了

label

该复选框不是使用

display:none

，而是使用

opacity

隐藏。然后你可以控制它所占据的区域

.label{
位置：相对位置；
显示：内联块；
}
输入[type=“checkbox”]{
不透明度：0；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
}
输入[type=“checkbox”]+。标签文本：在{
内容：“+”；
宽度：1米；
高度：1米；
显示：内联块；
右边距：5px；
}
输入[type=“checkbox”]：选中+。标签文本：之前{
内容：“-”；
}
输入[type=“checkbox”]：选中~.元素。未选中{
显示：无；
}
输入[type=“checkbox”]：未（：选中）~.元素。是否选中{
显示：无；
}

项目二
复选框已选中
复选框未选中

使用HTML将标签“连接”到复选框。这将使点击标签切换状态。使用复选框的选中状态和同级选择器，可以切换元素

<style>
    input[type=checkbox] {
        display: none;
    }
    input[type="checkbox"] + label:before {
        content: "+";
        width: 1em;
        height: 1em;
        display: inline-block;
        margin-right: 5px;
    }
    input[type="checkbox"]:checked + label:before {
        content: "-";
    }
    input[type=checkbox]:checked ~ .elements div.checked,
    input[type=checkbox]:not(:checked) ~ .elements div.unchecked {
        display: block;
    }
    input[type=checkbox]:checked ~ .elements div.unchecked,
    input[type=checkbox]:not(:checked) ~ .elements div.checked {
        display: none;
    }
</style>

<input type="checkbox" id="check" name="check">
<label for="check">My Item</label>
<div class="elements">
    <div class="checked">Checkbox is checked.</div>
    <div class="unchecked">Checkbox is NOT checked.</div>
</div>

输入[类型=复选框]{
显示：无；
}
输入[type=“checkbox”]+标签：在{
内容：“+”；
宽度：1米；
高度：1米；
显示：内联块；
右边距：5px；
}
输入[type=“checkbox”]：选中+标签：之前{
内容：“-”；
}
输入[类型=复选框]：选中~.elements div.checked，
输入[类型=复选框]：未（：选中）~.elements div.unchecked{
显示：块；
}
输入[类型=复选框]：选中~.elements div.unchecked，
输入[类型=复选框]：未（：选中）~.elements div.checked{
显示：无；
}
我的物品
复选框已选中。
复选框未选中。

使用HTML将标签“连接”到复选框。这将使点击标签切换状态。使用复选框的选中状态和同级选择器，可以切换元素

<style>
    input[type=checkbox] {
        display: none;
    }
    input[type="checkbox"] + label:before {
        content: "+";
        width: 1em;
        height: 1em;
        display: inline-block;
        margin-right: 5px;
    }
    input[type="checkbox"]:checked + label:before {
        content: "-";
    }
    input[type=checkbox]:checked ~ .elements div.checked,
    input[type=checkbox]:not(:checked) ~ .elements div.unchecked {
        display: block;
    }
    input[type=checkbox]:checked ~ .elements div.unchecked,
    input[type=checkbox]:not(:checked) ~ .elements div.checked {
        display: none;
    }
</style>

<input type="checkbox" id="check" name="check">
<label for="check">My Item</label>
<div class="elements">
    <div class="checked">Checkbox is checked.</div>
    <div class="unchecked">Checkbox is NOT checked.</div>
</div>

输入[类型=复选框]{
显示：无；
}
输入[type=“checkbox”]+标签：在{
内容：“+”；
宽度：1米；
高度：1米；
显示：内联块；
右边距：5px；
}
输入[type=“checkbox”]：选中+标签：之前{
内容：“-”；
}
输入[类型=复选框]：选中~.elements div.checked，
输入[类型=复选框]：未（：选中）~.elements div.unchecked{
显示：块；
}
输入[类型=复选框]：选中~.elements div.unchecked，
输入[类型=复选框]：未（：选中）~.elements div.checked{
显示：无；
}
我的物品
复选框已选中。
复选框未选中。

不…不…元素不再是输入的同级，因此您不能在CSSRated中引用它-不…不…元素不再是输入的同级，因此您不能在CSSRated中引用它-这不会显示我更改的自定义复选框，即使我将css代码添加到其中（当然，显示：无块除外）. ..我更新了我的答案。现在显示您的自定义“复选框”。使用：after而不是：before可以更改标签的位置。你是对的。忘记将+改为~。。。现在没事了。这不会显示我更改的自定义复选框，即使我向其中添加了css代码（当然除了display:none块）。。我更新了我的答案。现在显示您的自定义“复选框”。使用：after而不是：before可以更改标签的位置。你是对的。忘记将+改为~。。。现在好了，这很有效。谢谢不过，我确实有一个问题：不知何故，每次点击都不起作用。当您还向复选框添加cursor:pointer时，这一点变得非常明显。当我将光标悬停在标签上时，25%的时间光标没有改变…@mrCarnivore似乎每次对我都有效。。。是否有一个特定的标签区域不适合您，我可以尝试复制？我在Windows 10上使用Chrome，我找到了它，但仍然无法解释：当我添加：字体大小：25px；标记。问题开始出现。我在Win7上使用Firefox 52.3.0。Win7上的IE11结果相同…@mrCarnivore啊好的。如果你调整fon