Change Cursor Color with CSS caret-color

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.

See also  Liquid Hover Effect Button

Leave a Reply

Your email address will not be published. Required fields are marked *