프론트/리액트
css) input 포커스 시 움직임 수정
뽀짝코딩
2025. 6. 9. 23:45
728x90
상황
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] ..."
/>
반응형