Change Cursor Color with CSS caret-color

css
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.

#element {
	caret-color: #666666;
}

caret-color can be used on input fields that includes :

  • <input type="text" />
  • <textarea>
  • Any element having the contenteditable attribute.

Demo

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

HTML & CSS

<input type="text" id="demo-text" />
#element {
	caret-color: #f0932b;
}

Browser Support

caret-color is supported in all browsers.

In this Tutorial