如何仅用CSS在搜索文本框获焦时隐藏button类元素？

你的CSS代码无效的核心问题是选择器的层级和元素关系完全错误，以下是修正方案：

问题分析 #

你的DOM结构中，搜索框（.search）和目标按钮（.searchbutton）是同级元素，都嵌套在<form>内部，而.search-container是它们的父级容器。你之前写的选择器.search:focus .search-container .searchbutton是在尝试查找.search:focus内部的.search-container元素，这和实际DOM结构完全不符，所以不会生效。

正确CSS代码 #

由于目标按钮在搜索框的前面，我们可以使用CSS的:has()伪类来实现“当后代元素获焦时，隐藏另一个后代元素”的效果：

/* 当form内部的.search输入框获焦时，隐藏同form内的.searchbutton */
.search-container form:has(.search:focus) .searchbutton {
  display: none;
}

如果需要兼容不支持:has()的老旧浏览器，可以调整HTML结构，将搜索框放在按钮标签之前，然后使用相邻兄弟选择器：

调整后的HTML片段

<div class="search-container">
  <form action="/search" method="get">
    <%= text_field_tag :q, nil, class: 'search' , id: 'searchleft' , type: 'search' , placeholder: t('search') %>
    <label class="button searchbutton" for="searchleft">
      <svg xmlns="http://www.w3.org/2000/svg" 
          class="search-icon icon icon-tabler icon-tabler-search" width="44" height="44"
          viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" 
          stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <circle cx="10" cy="10" r="7" />
        <line x1="21" y1="21" x2="15" y2="15" />
      </svg>
    </label>
  </form>
</div>

配套CSS

/* 搜索框获焦时，隐藏紧跟其后的.searchbutton */
.search:focus + .searchbutton {
  display: none;
}

验证效果 #

两种方案都能实现：当搜索框（.search）获得焦点时，带有.searchbutton类的标签元素会被隐藏。

内容的提问来源于stack exchange，提问作者user12738469