How to change the style of the outer element when input focus through CSS?

I would like to ask, I hope that when the input box foucs, the border of the outermost search_bar can be thickened and changed color, but because the design draft needs my HTML structure as the example, so there are other ways to focus When changing the frame color and line thickness of search_bar?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.search_bar {
  display: flex;
  align-items: center;
  width: 90%;
  padding: 10px 8px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #222;
}
.search_bar .search_icon {
  width: 24px;
  height: 24px;
  background-image: url("https://png.pngtree.com/element_our/20200702/ourmid/pngtree-magnifying-glass-icon-image_2292648.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.search_bar .search_input {
  width: 100%;
  border: 0px;
  margin-left: 6px;
  font-size: 16px;
}
.search_bar .search_input:focus .search_bar {
  border: 1px solid red;
}
.search_bar .enter {
  white-space: nowrap;
}

<!-- language: lang-html -->

<div class="search_bar">
  <label for="search_input" class="search_icon"></label>
  <input id="keyWord" class="search_input" type="text" placeholder="輸入問題關鍵字">
  <button class="enter" id="js-search">搜尋</button>
</div>

<!-- end snippet -->

In this case you could use a CSS pseudo-class named :focus-within, which

> matches an element if the element or any of its descendants are focused

.search_bar:focus-within {
  border: 1px solid red;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.search_bar {
  display: flex;
  align-items: center;
  width: 90%;
  padding: 10px 8px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #222;
}
.search_bar .search_icon {
  width: 24px;
  height: 24px;
  background-image: url("https://png.pngtree.com/element_our/20200702/ourmid/pngtree-magnifying-glass-icon-image_2292648.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.search_bar .search_input {
  width: 100%;
  border: 0px;
  margin-left: 6px;
  font-size: 16px;
}
.search_input:focus {
  outline: none;
}
.search_bar:focus-within {
  border: 1px solid red;
}
.search_bar .enter {
  white-space: nowrap;
}

<!-- language: lang-html -->

<div class="search_bar">
  <label for="search_input" class="search_icon"></label>
  <input id="keyWord" class="search_input" type="text" placeholder="輸入問題關鍵字">
  <button class="enter" id="js-search">搜尋</button>
</div>

<!-- end snippet -->