CSS caret-color Property

What You’ll Learn

The caret-color property customizes the blinking text cursor in inputs and textareas. It is a small detail that can improve visibility and help form fields match your site’s color scheme.

Definition and Usage

The caret-color CSS property lets you customize the color of the text caret — also known as the text insertion cursor — in an input field, textarea, or other editable element.

By using this property, you can enhance the user experience by making the caret more visible or by matching it to your website’s color scheme. It applies to any element that accepts text input.

📝 Syntax

The syntax for caret-color is straightforward — the value is any valid CSS color:

selector {
  caret-color: color;
}

Basic Example

input[type="text"] {
  caret-color: red;
}

Syntax Rules

• The initial value is auto.
• Accepts any valid CSS color: named, hex, rgb, hsl, or currentColor.
• Works on editable elements: inputs, textareas, and contenteditable.
• The property is inherited, so you can set it on a parent form.
• Pair with sufficient text/background contrast for readability.

💎 Property Values

The caret-color property accepts standard CSS color values plus the keyword auto.

Supported Elements

caret-color affects the text insertion caret in editable fields. Common targets include:

• <input type="text">, email, search, url, and other text-based inputs
• <textarea> — multi-line text areas
• contenteditable elements — rich text regions users can edit

Set caret-color on individual fields or on a parent form so every child input inherits the same cursor color.

Examples Gallery

Try a red text input, textarea styling, theme variables, and a dark form field.

<style>
  input[type="text"] {
    caret-color: red;
  }
</style>

<label>
  Type something: <input type="text">
</label>

<style>
  textarea {
    caret-color: #2563eb;
  }
</style>

<textarea rows="4" placeholder="Write your message..."></textarea>

:root {
  --brand-color: #7c3aed;
}

form {
  caret-color: var(--brand-color);
}

<style>
  .dark-input {
    background: #1e293b;
    color: #f8fafc;
    caret-color: #38bdf8;
    border: 1px solid #334155;
    padding: 0.55rem 0.65rem;
  }
</style>

<input type="search" class="dark-input" placeholder="Search...">

♿ Accessibility

• Keep the caret visible — Choose a caret color with enough contrast against the input background.
• Do not rely on color alone — Labels, placeholders, and focus outlines still matter for usability.
• Test focus states — Ensure the caret and focus ring are both easy to see when keyboard navigating.
• Match text when unsure — Using currentColor or auto keeps the caret aligned with readable text.

💡 Best Practices