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

Question

I was creating a search function on my webpage, where when the button (label) is clicked then the search bar will be appeared. However, it is not working with checkbox. I have another checkbox on the same page which is working and I make sure the for attribute in label is pointing correctly.

I have the following code in my 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>

and the this in css:

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

I also tried to put the <input> after the div that contains the label but still not working.

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

I'm building a no-js page in case people has javascript disabled in their browser settings, so I want a script-free solution. I know it can be easily done with js, and I don't even need to use checkbox method. Because of the layout I can't move either the place of <label> or the place of the search bar.

Answer 1

So I deselect the display: none; of my input checkbox and I actually solve the problem myself. It appears that with the button inside, the checkbox isn't checked. I now only need to add pointer-events: none; to my css of the corresponding button and it works now.

Here I come another question, which I think it might be self-explanatory: How would my button work again when js isn't disabled? Should I point it to checkbox instead?