Community post

[CSS] - Setting the Cursor Color in Input Fields "caret-color"

Have you ever wanted to change the color of the cursor inside of a text field?

I know I have, and until the caret-color property came along, it just wasn't possible. The Cursor would always be the same color as the text. While that is okay in most scenarios, there are some times when you need a bit more control.

https://steemitimages.com/DQmaqnXqzBY7WzBkjFXY4AcTwfzqhf4BDBHhJQ8eX6iE8FZ/Screen%20Shot%202017-09-06%20at%202.27.27%20PM.png

The caret-color property makes this possible! Not only for text-fields either, but for any input, textarea, or really any editable elements, and it's very easy to use!

Here is an example of the code necessary to change the color of your cursor. You can ignore the 2nd input style set as those properties were only set for the purposes of easily showing the effects of the first properties in a screenshot.

CSS

input{
	color: #108329;
	caret-color: #ff00ce;
}

HTML

<input type="text">

Screen Shot 2017-09-06 at 2.26.48 PM.png

The results of that code will output a text-field with green text, and a pink cursor. ***Yes, it works!***

Browser Support

The Following browsers support the caret-color property.

Firefox 54+
Chrome 59+
Safari Technical Preview
Opera 47+
Android Browser 56+
Chrome for Android 59+