JS로 input에 focus했을 때 box-shadow 스타일 주기

검색창에 focus했을 때 튀어나오게 보여줄 수 있는 방법입니다!

코드 💻

inputBox.addEventListener("focus", function (e) {
  // give shadow to list-input-container (parentElement)
  inputBox.parentElement.style.boxShadow = "0 2px 6px rgb(0 0 0 / 20%)";
});

// when inputBox lost focus
inputBox.addEventListener("blur", function (e) {
  inputBox.parentElement.style.boxShadow = "none";
});

javascript로 작성한 코드입니다! input box를 클릭했을때 깔끔한 box-shadow를 줘서 입체적인 느낌을 줄 수 있습니다. 또한 focus를 잃어버렸을때 box-shadow를 없애기 위해 blur를 추가합니다

결과물 🚩

focus 전 (blur)