Question

我想实现点击按钮时显示的搜索框，并隐藏在外面的某处。我试图用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）因为它是插件的组件。

我更喜欢没有Javascript的解决方案。

Answer 1

试

.search:focus-within

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

带有CSS的弹出搜索框

1 个答案: