[CSS] 텍스트 박스의 커서(caret) 색상을 바꾸는 방법

웹페이지 상에서 input 이나 textarea 태그를 이용해 만든 텍스트 박스의 커서(caret) 색깔을 바꾸는 방법을 알아 봅시다. CSS 를 이용해 아주 간단하게 바꿀 수 있습니다.

커서 색상 = 글자색

원래 텍스트 박스의 커서 색깔은 해당 텍스트 박스의 글자 색깔과 같이 표시 됩니다. 글자색이 검은색이면 커서도 검은색으로 글자색이 하얀색이면 커서도 하얀색으로 표시 됩니다. 따라서 아래와 같이 CSS 로 color 속성의 값만 지정해주면 커서의 색상도 변경 됩니다.

input, textarea {
	color: #fff;
}

caret-color

하지만 글자색은 검은색으로 두고 커서는 붉은 색으로 바꾸고 싶다면 어떻게 해야 할까요. 이때 사용하는 CSS 속성이 바로 caret-color 입니다. 아래와 같이 스타일을 지정하면 글자는 검은색으로 커서는 붉은색으로 표시 할 수 있습니다.

input, textarea {
	color: 		#fff;
	caret-color: 	#d33;
}

끝.