Changing the text cursor with CSS caret-color

The blinking marker that shows where typed text will appear is the insertion caret. CSS lets you change its colour independently from the text with caret-color:

input {
  caret-color: blue;
}

textarea {
  caret-color: green;
}

The property also works on editable elements:

<h1 contenteditable="true">
  This is an editable heading.
</h1>

h1[contenteditable] {
  caret-color: blue;
}

This is most useful when the default caret has poor contrast against a custom input background. Keep it visible; matching it to the background rather defeats the point.

← Back to all articles