텍스트 커서-깜빡이는 막대기 " | " 없애기

깜빡거리는 막대기를 텍스트 커서 또는 캐럿 (Caret)이라 한다.

 

 

숨기는 방법

테일윈드

<input className="caret-transparent" />

 

CSS

.wrap: {
  caret-color: transparent;
}

 

 

---

여기서 추가로 🧩  

user-select: none;과 caret-color: transparent; 차이

🎯 user-select: none;

• 역할: 사용자가 텍스트를 드래그해서 선택하지 못하게 막음.
• 적용 대상: 텍스트 블록, 버튼, 링크 등

테일윈드 

<p className="select-none">이 텍스트는 복사 안 돼요</p>

CSS

.wrap: {
  user-select: none;
}

---

✏️ caret-color: transparent; 또는 Tailwind에서 caret-transparent

• 역할: 입력 필드에서 텍스트 커서(깜빡이는 막대기)를 숨김
• 적용 대상: <input>, <textarea> 등

테일윈드

<input className="caret-transparent" />

 

CSS

.div-wrap: {
  caret-color: transparent;
}

---

🔍 비교 요약

속성 역할 대상 요소

user-select: none;	텍스트 선택 방지	모든 텍스트 요소
caret-color: transparent;	입력 커서 숨기기	<input>, <textarea>