focus시에 일부 영역만 스타일링 된다면 focus-within

목표

구글을 클론하면서 :hover하거나 :focus시에 입력칸의 색상이 위와 같이 바뀌도록 하고 싶었다.

 

<div class="search__container">
  <i class="fa-solid fa-magnifying-glass"></i>
  <input type="text" />
  <a href="#">
    <i class="fa-solid fa-microphone" title="음성검색"></i>
  </a>
</div>

search__container 영역 전체가 색상이 변해야 하기에 :focus를 주었으나 동작하지 않았다. MDN을 통해 focus는 입력 칸 등 포커스를 받은 요소를 나타낸다는 것을 알았고, input에 focus처리하니 양쪽 아이콘 영역의 색상이 변경되지 않았다.

focus가 미적용되거나 input에만 적용

 

출처 : MDN :focus-within

포커스된 경우 전체를 강조해야 할 때는 focus-within을 써야 한다.

.search__container:focus-within {
  background-color: #f1f3f4;
}
.search__container:hover {
  background-color: #f1f3f4;
}