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

rocambille profile image

A CSS razor

Romain Guillemot -

rfornal profile image

CSS' only-child instead of Conditional Logic

bob.ts -

kaja_uvais_a8691e947dd399 profile image

Social Media Icons with Hover Effects Using HTML and CSS

Kaja Uvais -

alvaromontoro profile image

10 Cool CodePen Demos (September 2024)

Alvaro Montoro -