input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color)

input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color)

웹사이트에서 사용자의 입력 값을 받기 위해 input 태그를 사용하곤 하는데요. 사이트의 특색에 맞게 input 커서의 색상을 커스터마이징을 해야할 경우가 생기게 됩니다. 이때 색상을 바꾸는 간단한 방법에 대해서 알아보도록 하겠습니다.

커서 색상을 변경하는 방법

텍스트 색상을 상속받는 경우

기본적으로 input 커서의 색상은 텍스트의 색상을 상속받습니다. input 텍스트 색상을 변경하면 자동으로 커서의 색상 또한 변경되게 됩니다.

iinput 박스의 기본 커서 색상 적용 예시

input 텍스트 색상을 변경해 보도록 하겠습니다.

input {
  color: blue;
}

텍스트 색상을 변경하면 input 커서의 색상은 자동으로 변경되는 예시

커서 색상만 변경하고 싶은 경우

글자색과는 다른 색상으로 커서 색상을 바꾸고 싶다면 CSS caret-color 속성을 사용하면 손쉽게 처리할 수 있습니다. 아래와 같이 스타일을 적용하면 글자색은 검정색 커서 색상은 빨간색으로 표시할 수 있습니다.

input {
  color: #000;
  caret-color: red;
}

텍스트 색상과 별개로 커서 색상만 변경한 예시

자세한 정보는 여기를 참고하시면 더 자세한 정보를 얻으실 수 있습니다.