CSS caret-color property

Definition and Usage

The caret-color property specifies the color of the cursor (insertion symbol) in input, textareas, or any editable elements.

Example

Sets the color of the cursor in the input element:

input { 
  caret-color: red;
}

Try It Yourself

CSS Syntax

caret-color: auto|color;

Property Value

Value Description
auto Default. Browsers use currentColor for the insertion symbol.
color

Specifies the color used for the insertion symbol. All valid color values (rgb, hexadecimal, named colors, etc.) can be used.

For more information about valid values, see CSS ColorsTutorial.

Technical Details

Default Value: auto
Inheritance: Yes
Animation Production: Not supported. See also:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.caretColor="red"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 53.0 11.1 44.0