li 元素中的复选框不会触发 css：已选中 [重复]答案

【问题标题】：Checkbox in li element doesn't trigger css :checked [duplicate]li 元素中的复选框不会触发 css：已选中 [重复]
【发布时间】：2018-03-08 20:47:11
【问题描述】：

这不可能吗？我创建了一个响应式菜单系统，但是我的复选框的 :checked 事件没有被我的 CSS 捕获

CSS

#sectiona:checked + #asection {
    display: block;
}

HTML

<li >
    <label for="sectiona" class="showhide">Search for a term</label>
    <input type="checkbox" id="sectiona" value="button" style="display:none;"/>                   
</li>

我以前见过这样的事情。如果这不可能，我将不得不重新设计我的菜单。它必须是 HTML 和 CSS。不允许使用 Javascript...

【问题讨论】：

这是哪里的#asection？
你给定的代码示例你应该试试这个选择器li + #sectiona:checked
使用 js，如果理解正确，仅使用 css 是不可能的
我现在已经删除了
我怀疑您正在尝试做的是通过单击label/input 来影响li 外部的元素...这是不可能使用 CSS。

标签： html css checkbox checked

【解决方案1】：

如果没有正确理解，您尝试根据标签点击显示/隐藏复选框输入。

visibility 可以解决问题。

CSS：

input#sectiona:checked  {
   visibility: visible;
}

input#sectiona {
 visibility: hidden;
}

<li >
<label for="sectiona" class="showhide">Search for a term</label>
<input type="checkbox" id="sectiona" value="button" />                   
</li>

在这种情况下，您也可以添加display: block;

input#sectiona:checked  {
  visibility: visible;
  display: block;
}

【讨论】：