CSS 데모: caret-color 데모 버튼을 클릭해 보세요!
selector {
    caret-color: auto | <color>;
}
/* 키워드 값 */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor; /* 현재 요소의 글자색 */

/* 색상 값 */
caret-color: blue;
caret-color: #00a0e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 6% 24% / 0.8);

/* 전역 값 */
caret-color: inherit;
caret-color: initial;
caret-color: unset;
caret-color: revert;
caret-color: revert-layer;
<input type="text" id="custom-caret-input" placeholder="Type something...">
/* 입력 필드 스타일링 */
#custom-caret-input {
    font-size: 16px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 5px;
    caret-color: red; /* 커서 색상 설정 */
}
실제 적용 모습 커서의 색상을 보려면 입력 박스에 텍스트를 입력해 보세요.
커서의 색상이 red입니다.

caniuse.com에서 더 자세한 정보를 확인해 보세요.