Codectionary / Developer documentation / CSS

Styling the Text Insertion Caret

caret-color changes the insertion caret in editable controls and contenteditable regions. It changes neither the text color nor the selection highlight. A visible caret helps users locate where their next character will be inserted.

Syntax

textarea { caret-color: #c026d3; }

Examples

Styling the Text Insertion Caret: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

textarea { display: block; caret-color: #a21caf; color: #111827; background: white; font: 1.1rem/1.5 sans-serif; padding: .75rem; }
  1. Expected result: Focusing the textarea shows a purple insertion caret while its text remains dark.
  2. The caret appears only when the editable control is focused.
  3. The property does not replace the element’s focus outline.
HTML used by this example

<label for="draft">Draft message</label><textarea id="draft" rows="4">Place the cursor here and type.</textarea>

Best practices

  • Maintain strong caret contrast against the editing background.
  • Avoid hiding the caret in editable fields.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading