Changing Cursor Color for Textboxes with CSS caret-color Property

Published on April 16, 2019

The CSS caret-color property changes the color of the caret, or the blinking cursor for text inputs fields. Changing the color of the cursor when the user focuses on the text field makes it more noticeable.

The input fields include <input type="text" />, <textarea> and any element having the contenteditable attribute (this attribute makes any element behave like a textarea).

You can set any CSS color value on caret-color.

#element {
	/* color keywords */
	caret-color: green;

	/* hex */
	caret-color: #666666;


Place the cursor on the below textbox and see the orange caret color.


<input type="text" id="demo-text" />
#element {
	caret-color: #f0932b;
CSS :focus-within
Loading Comments