Как изменить css для form, когда :focus на input внутри него

Question

Есть вот такая форма:

.header-search {
  padding: 16px;
  background-color: #ff000080;
}
.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}

<form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

как сделать так, чтобы при фокусе на .header-search__input, цвета фона .header-search поменялся на синий.

upd: желательно с анимацией
upd: хотелось бы чисто на css. но если критично можно и js

Answer 1

На CSS это не сделать потому, что там указывается последовательность от предка к детям, но не наоборот

document.querySelector('.header-search__input').addEventListener('focus', function(e){
    document.querySelector('.header-search').classList.toggle("mystyle");
}, true);

document.querySelector('.header-search__input').addEventListener('blur', function(e){
    document.querySelector('.header-search').classList.toggle("mystyle");
}, true);

.header-search {
  padding: 16px;
  background-color: #ff000080;
  
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}
.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}

.mystyle {
   background-color: blue;      
}

<form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

Answer 2

Можно использовать псевдо-класс :focus-within, если устаревшие браузеры не нужны. Поддержка уже во всех современных браузерах. Но есть нюанс - нельзя указать что именно внутри формы должно быть в фокусе, будет реагировать на что угодно в фокусе.

.header-search {
  padding: 16px;
  background-color: #ff000080;
  transition: background-color 0.5s linear;
}

.header-search:focus-within {
  background-color: #0000ff;
}

.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}

<form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

БЛОГ НА HUSL

Как изменить css для form, когда :focus на input внутри него

Ответы (2 шт):