caret-color

Definition

The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as input or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.

Examples

Setting the caret color to a named color:

input, textarea {
  caret-color: blue;
}

Setting the caret color to a hex color:

input, textarea {
  caret-color: #ff0000; /* red */
}

Setting the caret color to an RGB color:

input, textarea {
  caret-color: rgb(255, 0, 0); /* red */
}

Setting the caret color to an RGBA color:

input, textarea {
  caret-color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */
}

Setting the caret color to transparent:

input, textarea {
  caret-color: transparent;
}

Setting the caret color based on an input's state:

input:focus {
  caret-color: blue;
}

Values

Best Practices

• Use a contrasting color: Make sure the caret color you choose is highly visible and contrasts well with the background color of the text area or input field. This will make it easy for users to spot the caret and follow along as they type.
• Test in different browsers: Some browsers may not support the caret-color property, or may interpret it differently. Be sure to test your code in different browsers to ensure that the caret color looks as expected.
• Be mindful of accessibility: Caret color should be chosen with consideration for users with low vision or color blindness. Darker colors on a light background or vice-versa is a good approach.
• Use auto as default: The default value for the caret-color property is auto, which means that the browser will use the default color for the caret. Unless you have a specific reason to change the caret color, you should stick with the default value.
• Consider using transparent: If you want the caret to be invisible, you can set the caret-color property to transparent. This can be useful in situations where you want to make the caret less obtrusive or when you're using a background image or pattern that makes the caret hard to see.
• Be consistent: Make sure the caret color is consistent across your website or application. This will help users to quickly identify the caret and understand where they are in the text area or input field.

Browser Compatibility