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

Question

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

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + .label-text:before{
    content: "+";
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px;
}

input[type="checkbox"]:checked + .label-text:before{
    content: "-"; 
}

label input[type="checkbox"]:checked ~ .elements .is_not_checked{
    display: none;
}

label input[type="checkbox"]:not(:checked) ~ .elements .is_checked{
    display: none;
}

<label>
    <input type="checkbox" name="check"> <span class="label-text">Item Two</span>
    <div class="elements">
      <div class="is_checked">
          Checkbox is checked
      </div>
      <div class="is_not_checked">
          Checkbox is not checked
      </div>
</label>

这行得通。但是当我单击元素文本时，我对复选框更改状态不满意。但是，当我将元素移出标签时，我无法再访问复选框状态。我试过:

(label > input[type="checkbox"]:checked) ~ .elements .is_not_checked{
    display: none;
}

但这甚至没有隐藏文字。如何仅使用 CSS 访问隐藏在另一个元素(在本例中为标签)中的复选框的状态？

Answer 1

使用 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>