html - 弹出式搜索框和CSS

我想实现在按钮单击时显示并在外部某处单击时隐藏的搜索框。我正在尝试使用CSS实现此功能。

我有下一个html：

<div tabindex="0" class="search">
  <div id="mobileSearch" class="search-by-name form-group ember-view">
    <div tabindex="0" role="button" id="ember415" class="ember-power-select-trigger ember-power-select-typeahead-trigger ember-basic-dropdown-trigger ember-view">
     <input type="search" id="ember-power-select-typeahead-input-ember410"  class="ember-power-select-typeahead-input ember-power-select-search-input">
    </div>
    <div id="ember-basic-dropdown-content-ember410" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
  </div>
  <div type="button" class="btn mobile-search-button"></div>
</div>

和scss：

.navbar {
  > .container-fluid {
    > .navbar-header {
      > .search {
        > #mobileSearch {
          width: 42px;
          height: 42px;
          display: inline;

          > div {
            margin-top: 15px;
            display: inline;
            height: 42px;
            position: absolute;
            min-width: 0;
            max-width: 0;
            margin-left: 42px;
            padding: 0;
            border: none;
            -webkit-transition: all 0.6s ease-in-out;
            -moz-transition: all 0.6s ease-in-out;
            -o-transition: all 0.6s ease-in-out;
            transition: all 0.6s ease-in-out;
          }
        }
      }

      > .search:focus {
        outline: none;
      }

      .search > #mobileSearch > div:focus,
      > .search:focus > #mobileSearch > div {
        min-width: 220px;
        max-width: 220px;
        padding: 2px 16px 2px 8px;
        margin-left: -178px;
        border: 1px solid #ccc;
      }

      .mobile-search-button {
        width: 42px;
        height: 42px;
        margin-top: 15px;
        background-color: transparent;
        background-image: url('/assets/search-128.png');
        background-size: cover;
      }
    }
  }
}

当用户单击按钮时，将出现搜索框，而当他在外部单击时，它会隐藏。这部分工作正常。但是，当用户将焦点移到输入字段时，搜索框也会隐藏。我知道该问题与搜索框结构有关（div与div与div与输入一起使用div），但是我不能更改最后一层（div与输入一起使用），因为它是插件的组件。

我希望没有Javascript的解决方案。

最佳答案

尝试

.search:focus-within

它将与.search和所有子元素一起使用

关于html - 弹出式搜索框和CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46173195/