DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

caret-color CSS property

#css

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
Enter fullscreen mode Exit fullscreen mode 
input {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode 
textarea {
    caret-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
p[contenteditable="true"] {
    background: black;
    color: yellowgreen;
    caret-color: tomato;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
cchana profile image
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! 🤷‍♂️

Collapse
 
phongduong profile image
Phong Duong •

That's really weird

Read next

madsstoumann profile image

Alien Signals — 2-in-1 Challenge

Mads Stoumann -

scriptjsh profile image

How to Optimize Performance in Tailwind W/ Shruti Balasa

Joshua Abel Alhassan -

asimachowdhury profile image

Essential Resources for Frontend Developers: Links You Can’t Live Without

Asima Chowdhury -

devyoma profile image

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Emore Ogheneyoma Lawrence -