CSS caret-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The caret-color property controls the color of the text insertion cursor (also known as the caret) in editable elements such as text inputs, textareas, and elements with contenteditable enabled. The caret is the blinking vertical line that indicates where the next character will appear as the user types.

By default, browsers automatically choose a caret color that matches or complements the text color. However, caret-color allows you to override this behavior, giving you full control over how the caret appears within form fields or editable content. This can be especially useful when working with custom themes, dark mode designs, or high-contrast user interfaces where the default caret color may be difficult to see.

Using caret-color, you can improve accessibility and usability by ensuring the caret remains clearly visible against various background colors. For example, when using dark backgrounds with light text, adjusting the caret color can prevent it from blending in or becoming distracting.

The property applies to elements that accept text input, such as:

<input> elements (text-based types)
<textarea>
Elements using contenteditable="true"

It does not affect static text or non-editable elements.

In modern UI design, caret-color is often used alongside custom focus styles, animated inputs, or themed form components to maintain visual consistency. It can also enhance user experience by subtly reinforcing brand colors without overwhelming the interface.

Definition

Initial value: auto
Applies to: All elements
Inherited: Yes
Computed value: auto is computed as specified and <color> values are computed as defined for the color property.
Animatable: Yes
JavaScript syntax: object.style.caretColor

Interactive Demo

caret-color: blue;

caret-color: #F0150F;

caret-color: auto;

caret-color: transparent;

Enter text in the field below to see example.

Syntax

caret-color: auto | <color>

Values

autoBrowsers use currentColor . Browsers can also automatically adjust the color of the carriage to provide good visibility and contrast with the surrounding content, based on currentColor , background, shadows, etc.
<color>The color of the caret.

Example

HTML

<div class="container">

  <h2>caret-color examples</h2>



  <label for="name">Input (blue caret)</label>

  <input id="name" class="blue-caret" type="text" placeholder="Type here...">



  <label for="note">Textarea (magenta caret)</label>

  <textarea id="note" class="magenta-caret" rows="4" placeholder="Write a note..."></textarea>



  <label>Contenteditable (green caret)</label>

  <div class="editable green-caret" contenteditable="true" role="textbox" aria-label="editable area">Click here and type...</div>



  <p class="hint">Tip: caret-color sets the color of the text insertion caret.</p>

</div>

CSS

/* Basic page styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f9fc;
  color: #0f172a;
  padding: 32px;
}

/* Container */
.container {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

/* Form controls */
label {
  font-weight: 600;
  margin-top: 8px;
}

input,
textarea,
.editable {
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #0f172a;
}

/* editable div */
.editable {
  min-height: 52px;
}

/* Focus outline */
input:focus,
textarea:focus,
.editable:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.08);
}

/* caret-color examples */
.blue-caret { caret-color: #0ea5e9; }     /* sky blue */
.magenta-caret { caret-color: #d946ef; }  /* magenta */
.green-caret { caret-color: #10b981; }    /* green */

/* Hint text */
.hint {
  font-size: 13px;
  color: #475569;
  margin-top: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS caret-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.