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.