checkbox:checked 的行为与 css 中指示的不同，而同一页面上的其他复选框有效

Question

我在我的网页上创建了一个搜索功能，当点击按钮（标签）时搜索栏就会出现。但是，它不适用于复选框。我在同一页面上有另一个正在工作的复选框，我确保 label 中的 for 属性指向正确。

我的 html 中有以下代码：

<input type="checkbox" id="search-switch" />
<div>
<label for="search-switch">
  <button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<div class="search-placeholder">
  <!-- a search bar -->
</div>

和 css 中的这个：

#search-switch {
  display: none;
}
.search-placeholder {
  display: none;
}
#search-switch:checked ~ .search-placeholder {
    display: block;
}

我也尝试将 <input> 放在包含 label 的 div 之后，但仍然无法正常工作。

<div>
<label for="search-switch">
  <button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<input type="checkbox" id="search-switch" />
<div class="search-placeholder">
  <!-- a search bar -->
</div>

我正在构建一个无 js 页面，以防人们在他们的浏览器设置中禁用 javascript，所以我想要一个无脚本的解决方案。我知道用js可以轻松完成，我什至不需要使用checkbox方法。由于布局的原因，我无法移动 <label> 的位置或搜索栏的位置。

Answer 1

所以我取消选择输入复选框的 display: none;，实际上我自己解决了这个问题。看起来里面有按钮，复选框没有被选中。我现在只需要将 pointer-events: none; 添加到我的相应按钮的 css 就可以了。

这里我又来了一个问题，我认为可能是self-explanatory：如果没有禁用 js，我的按钮将如何再次工作？我应该将它指向复选框吗？

checkbox:checked 的行为与 css 中指示的不同，而同一页面上的其他复选框有效

checkbox:checked does not behave as indicated in css while other checkbox on the same page is working

html

css

checkbox