1

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

.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

1
  • на css это не сделать потому, что там указывается последовательность от предка к детям, но не наоборот Commented 21 янв. 2021 в 14:48

2 ответа 2

1

Можно использовать псевдо-класс :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>

1
  • отличный ответ. спасибо. но старые браузеры отбросить нельзя. Commented 21 янв. 2021 в 15:57
0

На 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.