focus-within 선택자로 폼 필드에 인터랙션 추가하기

혹시 현대카드 앱 써보셨나요? 현대카드 앱의 검색창을 보면 포커스됐을 때 라인이 펼쳐지는 인터랙션을 볼 수 있습니다.

꽤나 쿨한 인터랙션이라고 생각하고 있던 차에 새롭게 진행한 프로젝트에 적용해 보면 좋겠다는 생각이 들었습니다. 이번 포스트에서는 :focus-within 선택자를 사용하여 해당 인터랙션을 구현한 이야기를 해보겠습니다.

어떻게 구현할까?

간단하게 input이 포커스 됐을 때 after 가상 요소의 scaleX를 조정해 구현하면 될 것 같았습니다. 그러나 안타깝게도 input 태그는 닫힌 태그라 가상 요소를 사용할 수 없었습니다. input 태그가 포커스될 때마다 부모 요소에 class를 붙여주는 식으로 구현해야하나 고민하던 차에 CSS만으로 해당 인터랙션을 구현할 수 있는 방법을 알게 되었습니다.

:focus-within

:focus-within 선택자는 포커스된 요소 또는 자손 요소가 포커스 되었을 때 스타일을 적용할 수 있는 선택자입니다. 이를 사용하여 input이 포커스 되었을 때 부모 div 태그에 스타일을 적용하여 쉽게 인터랙션을 구현할 수 있습니다.

최종 코드

최종 코드는 이렇게 됩니다.

html코드 복사
<div class="field">
    <input type="text"/>
</div>

css코드 복사
.field {
  position: relative;
  padding: 4px 0;
  border-bottom: 1px solid #c7c3bc; 
}

.field::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #605d56; 
  transform: translateX(-50%) scaleX(0);
  transition: transform 200ms ease-in-out;
}

.field:focus-within::after {
  transform: translateX(-50%) scaleX(100%);
}

포스팅을 마치며

:focus-within 선택자를 사용해 쉽게 인터랙션을 구현할 수 있었습니다. form이나 input 관련한 스타일 작업을 하기에 굉장히 유용해서 앞으로 다른 프로젝트에서도 잘 사용할 것 같습니다. 그럼 여기서 글을 마치도록 하겠습니다 👋👋👋

참고 자료

• MDN :focus-within