将样式添加到输入字段焦点上的另一个元素中

Question

我有一个html结构：

<div class="floating-labels">
   <div class="form-group focused">
      <span class="select2 select2-container">
         <span class="selection">
            <span class="select2-selection">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search"> // on focus here
                    </li>
                </ul>
            </span>
         </span>
         <span class="dropdown-wrapper" aria-hidden="true"></span>
       </span>
       <span class="bar"></span> // change style here                        
    </div>                                    
 </div>

在这里，我希望通过css将样式.select2-search__field宽度: 50%;添加到类.bar的输入框中。

我试过像这样

 .floating-labels > .focused > .select2-search__field:focus ~ .floating-labels > .focused > bar:after {
       width: 50%;
  }

但没起作用。

Answer 1

如果您想在不使用Javascript的情况下完成这一任务，那么您的focus-within结构实际上只有一个选项，您可以在MDN上找到更多的信息，支持现在在现代浏览器中非常好。

检查focus-within上的.select2 span，选择下一个.bar元素的:after并在那里应用您的样式。如果你需要支持IE，有多填充，但是你会使用Javascript的任何一种方式，所以你可以直接使用Javascript来操纵你的风格。

​

.select2:focus-within + .bar:after {
  width: 50%
}

.bar {
  position: relative;
  display: block;
  height: 50px;
}

.bar:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: red;
  display: block;
  transition: .3s ease
}

<div class="floating-labels">
  <div class="form-group focused">
    <span class="select2 select2-container">
         <span class="selection">
            <span class="select2-selection">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search">
                    </li>
                </ul>
            </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
    <span class="bar"></span>
  </div>
</div>

​