[CSS] 텍스트 커서(caret) 색상 변경

텍스트 커서(caret) 정의

웹페이지의 텍스트 커서 색상을 변경하기 위해서는 CSS의 caret-color 속성을 적용할 수 있습니다. 다소 생소한 속성인 caret-color을 이용하면 텍스트를 작성할 때 깜빡이는 커서의 색상을 변경할 수 있습니다. 원래는 별도로 설정하지 않아도 텍스트 색상의 색깔을 그대로 따라가지만, 텍스트 색상과 무관하게 별도로 색상을 지정해주고 싶은 경우에 적용이 가능합니다.

적용 예시

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

HTML

<input value="이 필드는 기본 캐럿을 사용합니다." size="64"/>
<input class="custom" value="내 캐럿은 맞춤형 색상입니다." size="64"/>
<p contenteditable class="custom">이 단락은, 다음과 같이 편집된 캐럿은 커스텀 색상이 적용되었습니다.</p>

CSS

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}


p.custom {
  caret-color: green;
}