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

Question

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?

.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;
}

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

https://stackoverflow.com/a/46406959/8620333 – Temani Afif Jan 09 '23 at 09:20 — Temani Afif, Jan 09 '23 at 09:20

score 1 · Accepted Answer · answered Jan 09 '23 at 06:10

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;
}

.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;
}

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

Turns out this property still exists, awesome! Thank you – AWEI Jan 09 '23 at 06:29 — AWEI, Jan 09 '23 at 06:29

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

1 Answers1