caret-color CSS property

Caret is a cursor in the input, textarea elements. It shows where the next typed character will be inserted. caret-color property sets the color of the caret. It can also be used for the elements with contenteditable attribute. The default value of this attribute is auto. It will take currentcolor and usually black.

input

input {
    color: red;
}

When you type the text in the input, the text color is red. caret-color will take the value of color property.

textarea(rows="5")

textarea {
    caret-color: transparent;
}

caret-color can take transparent value but it is hard to see where the cursor is especially when you are inserting in between the text.

p(contenteditable="true") Please click this text and edit it

p[contenteditable="true"] {
    background: black;
    color: yellowgreen;
    caret-color: tomato;
}

Although caret-color takes the value of color property by default, you can set a different value to ensure good visibility.

Here is the full example

Comments

[Charanjit Chana]

I’m using Safari on iOS and these are the results I get from your example:

1. Red cursor for input field \o/
2. Default blue for textarea (instead of transparent)
3. Default blue for contenteditable (instead of tomato)

So one of the three worked. I can understand if transparent was ignored because it is basically unusable but not sure why the one for contenteditble isn’t working...

Even weirder though, if I go to codepen and edit your example, the input just shows as blue too! 🤷‍♂️

[Phong Duong]

That's really weird