当元素被聚焦时，我如何动态地更改sass属性？

Question

我有一个输入类型搜索和一个div就在它下面。当搜索框聚焦时，我想将div的颜色从蓝色更改为红色。

我的部门

  <div id="demo-2">
    <input type="search" placeholder="Search By Title, Author" />
    <div class="autocomplete">
      hello
    </div>
  </div>

我申请的课程

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

.autocomplete {
  background-color: blue;
  height: 350px;
  width: 275px;
  position: absolute;
  display: block;
  right: 1em;
  top: 1em;
  z-index: -50;
  margin-right: 20px;
}

我的要求是，当搜索不使用任何javascript时，类自动完成的背景色应该从蓝色变为红色。

尝试在下面的代码，但没有工作

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  .autocomplete {
    background-color: red;
  }
}

Answer 1

您可以使用邻接兄弟组合子(+)或广义兄弟组合子(~)

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  ~ .autocomplete {
    background-color: red;
  }
}

Answer 2

而不是div，使用label并使label块，例如

​

input{
  &:focus{
    & ~ label{
      background-color:red;
    }
  }
}

label{
  display:block;
  background-color:blue;
  color:white;
  padding:.5rem;
  margin-top:1rem;
}

<input type="text" id="user" autocomplete="off">
<label for="user">Username</label>

​