🖊️ CSS caret-color — Complete Tutorial

🌐 What Is caret-color?

The caret-color property controls the color of thetext cursor (caret) inside editable elements like<input>, <textarea>, and contenteditable elements.

The caret is the blinking vertical bar that appears when you type. With caret-color, you can match the cursor to your brand or theme.

>>“caret-color improves UX by ensuring the text cursor stays visible and stylish.”

Note

✔ Works on inputs, textareas, and any element with contenteditable
✔ Supports all modern browsers
✔ Accepts any CSS color value

📦 Syntax

caret-color syntax

caret-color: auto | <color>;
ValueDescription
autoDefault caret color (usually text color).
<color>Any CSS color: hex, rgb, hsl, color(), named colors, etc.

📌 1. Basic Example

Simple caret color

input {
  caret-color: #ff5722; /* Orange caret */
}

The caret becomes orange inside input fields.

📌 2. Use Caret Color on Textareas

Textarea styling

textarea {
  caret-color: dodgerblue;
}

A bright blue caret improves visibility on light backgrounds.

📌 3. Match Caret to Dark Mode

Dark mode caret

input {
  caret-color: #00e5ff;
}

@media (prefers-color-scheme: dark) {
  input {
    caret-color: #80ffff; /* Brighter caret for dark backgrounds */
  }
}

Ensures the caret stays visible in both light and dark UI themes.

📌 4. Use CSS Variables With Caret Color

CSS variable caret

:root {
  --caret-theme: #9c27b0;
}

input[type="text"] {
  caret-color: var(--caret-theme);
}

Makes caret color themeable across large applications.

📌 5. Custom Caret for Contenteditable Elements

contenteditable

[contenteditable="true"] {
  caret-color: limegreen;
}

Great for editors, note-taking apps, or chat interfaces.

📌 6. Invisible Caret (Special Use Case)

Transparent caret

.no-caret {
  caret-color: transparent;
}

Used for special UI effects, pseudo-inputs, or read-only editing modes.

🧪 Real-World Examples

1️⃣ Modern Login Form

Login form caret

.login input {
  caret-color: #4caf50; /* Green caret */
}

2️⃣ Code Editor (contenteditable)

Editor caret

.editor {
  caret-color: #ff4081; /* Pink caret */
}

Stylish caret for coding interfaces.

3️⃣ Chat App Input

Chat input

.chat-input {
  caret-color: #2196f3;
}

⚠️ Common Mistakes

  • ❌ Setting caret-color on elements that are not editable
  • ❌ Choosing colors with low contrast → caret becomes invisible
  • ❌ Forgetting theme-specific caret colors (light vs dark mode)

Note

The caret must always have strong contrast against the background for accessibility and usability.

🔥 Summary

The caret-color property gives you precise control over the color of the blinking cursor inside text inputs, text areas, and editable elements. It enhances readability, accessibility, and brand consistency.

>>“A small detail like caret color can dramatically improve the typing experience.”

Learn more →MDN Docs 📘