웹 페이지에서 입력 필드의 깜빡이는 텍스트 커서(캐럿) 색상을 변경하고 싶다면 caret-color 속성을 사용하면 됩니다. 이 속성을 활용하면 기본 검정색 커서 대신 원하는 색상으로 자유롭게 지정할 수 있어, 사이트의 디자인 테마에 맞는 세련된 사용자 경험을 제공할 수 있습니다.
caret-color 속성이란?
caret-color는 텍스트를 입력할 때 나타나는 삽입 포인터(커서)의 색상을 지정하는 CSS 속성입니다. input, textarea 등 편집 가능한 요소에 적용할 수 있습니다.
주요 값
- auto: 브라우저가 적절한 색상을 자동으로 선택합니다(기본값).
- <color>: blue, red, #ff0000, rgb(0,0,255) 등 유효한 CSS 색상 값을 지정합니다.
예제 코드
아래 예제는 caret-color 속성을 사용하여 파란색 커서를 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
caret-color: blue;
}
</style>
</head>
<body>
<p>아래 입력창을 클릭하면 파란색 커서가 나타납니다</p>
<input class = "demo" value="파란색 커서"><br><br>
</body>
</html>실행 결과
위 코드를 실행하고 입력 필드를 클릭하면, 일반적인 검정색이 아닌 파란색 텍스트 커서가 깜빡이는 것을 확인할 수 있습니다.
브라우저 호환성
caret-color 속성은 Chrome 57+, Firefox 53+, Safari 11.1+, Edge 79+ 등 주요 최신 브라우저에서 지원됩니다. 다만 구형 브라우저에서는 동작하지 않을 수 있으므로, 필요 시 호환성 확인 후 사용하는 것이 좋습니다.