Changing div background color when focusing on an input inside it

Question

Hi I'm trying to do change the style of a div by clicking on an input inside of it. This is my HTML:

<li class="search-bar">
  <form action="" class="search-bar">
    <button class="search-btn">
      <i class="fas fa-search"></i>
    </button>
    <input placeholder="Search term..." type="text" />
  </form>
</li>

SCSS:

.search-btn,
input {
    background: transparent;
}

.search-bar {
    background: $light-grey;
    &:hover {
        background: $light-grey-hover;
    }
    &:focus {
        background: white;
    }
}

When clicking on the input, .search-bar background color doesn't change. I suppose this is because I'm actually focusing on the input inside of it, not the .search-bar div.

How can I make it so that when focusing on the input I can change the style of the whole div containing it? is this possible using css ot should I use a js file?

Answer 1

You probably could use :focus-within:

.search-bar {
  background: blue;
}

.search-bar:focus-within {
  background: green;
  /* and any style you want to reset */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<li class="search-bar">
  <form action="" class="search-bar">
    <button class="search-btn">
      <i class="fas fa-search"></i>
    </button>
    <input placeholder="Search term..." type="text" />
  </form>
</li>