Есть вот такая форма:
.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