CSS caret-color Property

Example

Set the color of the cursor in input elements:

input {
  caret-color: blue;
}

Definition and Usage

The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

Default value: auto
Inherited: yes
Animatable: no.
Version: CSS3
JavaScript syntax: object.style.caretColor="blue"

  • Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which caret-color is applied.
  • Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

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

Property          
caret-color 57.0 79.0 53.0 11.1 44.0

CSS Syntax

caret-color: auto|color|initial|inherit;

Property Values

Value Description
auto Default. Browsers uses the currentColor for the caret
color Specifies a color to use for the caret. All legal color values can be used (rgb, hex, named-color, etc).
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Comments