CSS caret-color Property

CSS caret-color Property

The caret-color property in CSS changes the color of the text cursor (caret) in input fields, text areas, and editable elements.

1. Syntax

selector {
  caret-color: value;
}

Value	Description
auto (default)	Uses the text color for the caret.
color-name	Named colors like red, blue, green.
hex	Example: #ff5733.
rgb()	Example: rgb(255, 87, 51).
rgba()	Example: rgba(255, 87, 51, 0.5).
hsl()	Example: hsl(30, 100%, 50%).
transparent	Hides the caret.

2. Example – Custom Caret Color in Input Fields

input {
  caret-color: red;
  font-size: 18px;
}

✅ The blinking cursor in the input field appears red.

3. Example – Custom Caret in a contenteditable Div

div {
  caret-color: blue;
  border: 1px solid gray;
  padding: 10px;
}

<div contenteditable="true">Type here...</div>

✅ The caret inside this editable div is blue.

4. Example – Hiding the Caret

input {
  caret-color: transparent;
}

✅ The text cursor is invisible.

5. Best Practices

✔ Use a contrasting caret color for better visibility.
✔ Avoid setting caret-color: transparent unless necessary.
✔ Works well with custom input styling to improve accessibility.