웹 페이지에서 텍스트를 입력할 때 나타나는 커서(캐럿)의 색상을 변경하고 싶다면 CSS의 caret-color 속성을 활용하면 됩니다. 이 속성을 사용하면 기본 검정색 대신 원하는 색상으로 입력 커서를 자유롭게 꾸밀 수 있어, 사이트의 디자인 테마에 맞춘 세련된 UI를 구현할 수 있습니다.
아래 예제 코드를 실행하면 파란색으로 표시되는 커서를 직접 확인해 볼 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
caret-color: blue;
}
</style>
</head>
<body>
<p>아래 입력창을 클릭하면 파란색 커서가 표시됩니다</p>
<input class = "demo" value = "Blue Cursor"><br><br>
</body>
</html>코드 설명: 위 코드에서는 .demo 클래스에 caret-color: blue; 스타일을 적용했습니다. 이렇게 하면 해당 클래스가 지정된 입력 요소(input)를 클릭했을 때 깜빡이는 텍스트 커서가 파란색으로 나타납니다.
참고 사항
- caret-color 속성은 모든 주요 최신 브라우저에서 지원됩니다.
- 색상 값은 blue, red 같은 키워드뿐 아니라 #ff0000(HEX), rgb(255, 0, 0)(RGB) 등 다양한 형식으로 지정할 수 있습니다.
- auto(기본값), transparent(투명) 등의 값도 사용 가능하며, 투명하게 설정하면 커서가 보이지 않게 됩니다.