CSS caret-color Property

The caret-color property allows you to define the color of the insertion caret, which is the blinking line indicating where text will be entered.

selector { caret-color: value; }
auto The browser selects a color for the caret, which is usually the current value of the color property or an inverted color.
<color> Defines a specific color for the caret using keywords, hex, RGB, or HSL values.
transparent Makes the caret invisible without disabling the ability to type or edit text.

Code Examples

A basic example showing a text input with a custom orange caret color to match a brand theme.

<style>
  .branded-input {
    font-size: 18px;
    padding: 10px;
    border: 2px solid #333;
    caret-color: #ff8c00;
  }
</style>
<input type="text" class="branded-input" placeholder="Type here...">

An advanced example using a contenteditable div where the caret color is updated dynamically via JavaScript based on the amount of text entered.

<div id="editor" contenteditable="true" style="padding: 20px; border: 1px solid #ccc; font-family: sans-serif; caret-color: #0000ff;">
  Click here to start editing with a blue cursor.
</div>
<script>
  const editor = document.getElementById("editor");
  editor.addEventListener("input", () => {
    // Change caret color to green once the user starts typing
    if (editor.innerText.length > 5) {
      editor.style.caretColor = "#00ff00";
    }
  });
</script>

Pro Tip

You can use CSS transitions on the caret-color property. This allows for subtle effects, like having the caret change color when an input field transitions from a valid state to an error state. For example, you could have a blue caret for standard typing that shifts to red if the user enters an invalid email address, giving them an extra layer of immediate visual feedback.

Deep Dive

Think of the caret as the "You Are Here" pin on a map. When a user clicks into a text field, the browser drops this blinking marker to show where the next character will appear. By default, the browser handles this automatically, often just matching the text color. However, when you are building a custom UI with specific branding, the default black or gray cursor might look out of place or get lost against a dark background. This property lets you paint that marker. It applies specifically to elements that are editable, such as "input", "textarea", or any container where "contenteditable" is active. It does not change the width, shape, or blink rate of the cursor; it only affects the paint applied to that vertical line.

Best Practices

Use caret-color to reinforce your brand's visual identity by matching the cursor to your primary accent color. This creates a more polished, application-like feel. Always ensure that the chosen color provides a high enough contrast ratio against the background of the input field so users don't lose track of their position. If you are using a dark theme, a bright or neon caret can act as a helpful beacon for the user's eye.

Common Pitfalls

The biggest mistake is setting the value to "transparent". While this might seem like a clever way to hide the cursor for a specific design, it makes the input field feel broken or unresponsive to the user because they lose the visual feedback of where they are typing. Another thing to remember is that this property only works on editable elements. If you apply it to a standard paragraph or div that is not editable, you won't see any change.

Accessibility

Accessibility is crucial here. Users with low vision rely on that blinking line to navigate through forms and text areas. If the caret-color is too similar to the background color, it becomes an invisible wall. Always test your color choices against your input backgrounds. Most browsers do a good job with the "auto" setting by ensuring visibility, so only override it if you are certain your custom color remains accessible to all users.

Dev Data Table: caret-color property

default auto
animatable yes
inherited yes
experimental no
year_intro 2014
year_standard 2017
js_syntax_1 element.style.caretColor = "#ff0000";
js_syntax_2 element.style.setProperty("caret-color", "#ff0000");
js_note Target editable elements like inputs, textareas, or any element with the contenteditable attribute set to true.
browsers { "Chrome": 57, "Edge": 79, "Firefox": 53, "Safari": 11.1, "Opera": 44, "Chrome Android": 57, "Safari on iOS": 11.2, "Samsung Internet": 7, "Opera Mobile": 43 }
results render here...