当另一个元素获得焦点时隐藏元素答案

【问题标题】：hide element when another element is focused当另一个元素获得焦点时隐藏元素
【发布时间】：2022-12-31 08:43:53
【问题描述】：

当聚焦搜索文本字段时，如何仅使用 css 隐藏具有类名“按钮”的元素？

<div class="search-container">
  <form action="/search" method="get">
    <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>
    <%= text_field_tag :q, nil, class: 'search' , id: 'searchleft' , type: 'search' , placeholder: t('search') %>
  </form>
</div>

我试过这样做，但没有运气：

.search:focus .search-container .searchbutton {
  display: none !important;
  }

【问题讨论】：

为什么不显示生成的 HTML 使您的问题复杂化？

标签： html css css-selectors

【解决方案1】：

因为您的标签链接到具有 for 属性的输入，您可以按照以下代码使用 :focus-within 伪类。

请注意，您的按钮也会在单击时消失，这是因为由于 for 属性，单击标签也会使输入框获得焦点：

.search-container:focus-within .button {
  visibility: hidden;
}

<div class="search-container">
  <form action="/search" method="get">
    <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>
    <input class='search' id='searchleft' placeholder='search'>
  </form>
</div>

如果它们没有链接，那么您可以使用 [:has()][1] 伪类，如下所示（但请注意，这还不适用于所有浏览器，例如 firefox）：

.search-container:has(input:focus) .button {
  visibility: hidden;
}

<div class="search-container">
  <form action="/search" method="get">
    <label class="button searchbutton">
      <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>
    <input class='search' id='searchleft' placeholder='search'>
  </form>
</div>

【讨论】：