CSS caret-color 속성 – 마우스 텍스트 입력 커서 색상 바꾸기

정의 및 사용 방법

caret-color 속성은
텍스트 입력 커서(caret, 캐럿)의 색상을 지정하는 속성입니다.

이 속성은 <input>, <textareat> 등 텍스트를 입력 받는 편집 가능한 모든 요소에서 입력 커서(caret, 캐럿) 색상을 변경할 수 있습니다. 예를 들면 다음과 같습니다.

기본 예제

caret-color 속성은 텍스트 입력 커서(caret, 캐럿)의 색상만 지정할 수 있고, 두께나 모양, 깜빡임 속도 등은 제어하지 못합니다.

형식 정의

caret-color 속성의 형식 정의
초깃값	`auto`
적용 요소	텍스트를 입력 받는 편집 가능한 모든 요소
상속	아니오

형식 구문

auto: 브라우저가 자동으로 커서(caret, 캐럿) 색상을 선택합니다. 보통 요소의 텍스트 색상과 배경색을 고려하여 가독성을 보장하는 색상을 지정합니다.
<color>: 커서(caret, 캐럿)의 색상을 명시적으로 지정합니다. 이 값은 CSS에서 허용하는 모든 색상 형식(예: 색상 이름(blue), 16진수 코드(#00a0e9), RGB, HSL 등)을 사용할 수 있습니다.

구문

CSS

/* 키워드 값 */
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;

예제

CSS

/* 입력 필드 스타일링 */
#custom-caret-input {
    font-size: 16px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 5px;
    caret-color: red; /* 커서(caret, 캐럿) 색상 설정 */
}