텍스트를 입력할 때 나타나는 삽입 커서(캐럿, caret)의 색상을 변경하려면 CSS의 caret-color 속성을 사용합니다. 이 속성을 활용하면 input이나 textarea 등 편집 가능한 요소에서 커서의 색상을 자유롭게 지정할 수 있으며, transparent 값을 사용하면 커서를 완전히 숨길 수도 있습니다.
예제 1: caret-color로 커서 색상 지정하기
다음 예제는 caret-color 속성을 사용하여 입력 필드의 커서 색상을 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 2%;
text-align: center;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
background-color: beige;
}
input {
font-size: 3em;
caret-color: chartreuse;
margin: 2%;
}
</style>
</head>
<body>
<form>
<input value="Check the caret color!" />
<button>Hit!</button>
</form>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
입력 필드를 클릭하면 chartreuse(연두색)로 지정된 커서가 표시됩니다. 또한 :focus-within
예제 2: transparent 값으로 커서 숨기기
caret-color에 transparent 값을 지정하면 커서를 보이지 않게 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 2%;
background-color: thistle;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
textarea {
caret-color: transparent;
}
</style>
</head>
<body>
<form>
<input type="radio" />1
<input type="radio" />2
<textarea placeholder="Invisible"></textarea>
</form>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
textarea 영역을 클릭하고 텍스트를 입력해도 커서가 화면에 나타나지 않습니다. 이처럼 caret-color 속성은 색상 이름, HEX 코드, RGB 값 등 모든 유효한 CSS 색상 값을 지원하며, 필요에 따라 커서를 숨기는 용도로도 활용할 수 있습니다.