Как динамически изменить свойство sass, когда элемент сфокусирован?

Question

У меня есть поиск типа ввода и div чуть ниже. Я хочу изменить цвет 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 и создайте блок меток, например

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>