search box CSS 검색 박스 CSS 예시

 

<div
  class="px-3 w-full flex border border-gray-200 rounded-md shadow-[0px_0px_12px_-1px_rgba(0,0,0,0.04)] gap-1 focus-within:border-primary transition-all"
>
  <div class="flex py-[0.65625rem] items-center">
    <img src="\assets\icon\search.png" class="h-4 w-4" />
  </div>
  <input
    placeholder="제목, 내용으로 검색해주세요"
    class="text-sm text-gray-400 py-2.5 w-full outline-none"
  />
</div>

1. input : outline-none : 기존 아웃 라인 제거

2. focus-within:border-primary transition-all : 새로운 아웃라인