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

`caret-color` 속성의 이해

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

caret-color 속성은 텍스트 입력 시 나타나는 텍스트 캐럿(입력 커서)의 색상을 지정하는 CSS 속성입니다. 텍스트 입력 필드나 에디터 등에서 텍스트를 입력할 때 보이는 커서의 색상을 지정하는 데 사용됩니다. 이 속성은 주로 텍스트 입력 요소의 시각적인 표현을 개선하는 데 활용됩니다.

형식 정의

caret-color 속성의 형식 정의
초깃값	`auto`
적용 요소	모든 요소
상속	아니오

구문

CSS 출처링크: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color#syntax

/* 키워드 값 */
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; /* 커서 색상 설정 */
}