css) input 포커스 시 움직임 수정

상황

 input의 border- bottom 컬러 변경시 focus 될때 ui가 아래로 살짝살짝 밀린다

 

 

✅ 원인: border 두께가 focus 시 달라지기 때문

 

 

해결

평상시에도 border 두께를 맞추고, 색상만 바꾸기

focus:border-b-2 focus:border-b-[#0073e9] rounded-t" 라인 수정

 

[수정 전]

<div>
    <div className="relative border border-gray-300  rounded-t">
        <input
          type="text"
          placeholder="아이디(이메일)"
          className="outline-none  px-4 py-2 w-[300px]
          focus:border-b-2 focus:border-b-[#0073e9] rounded-t"
        />
        <span className="absolute top-1/2 right-3 transform -translate-y-1/2">
            <CloseIcon />
        </span>
    </div>
        <div className="text-xs text-[var(--color-red-500)] m-3">
        아이디(이메일)를 입력해주세요.
    </div>
</div>

 

[수정 후]

<input
  type="text"
  className="border-b-2 border-transparent focus:border-[#0073e9] ..."
/>