Caret-color - CSS Property
Summary of characteristics of the caret-color property
auto | currentcolor | transparentautoComputed value: during an animation, the caret-color property gradually changes from one value to another.Single: single value (no order).Syntax diagram of caret-color.
caret-color property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
color-nameis the name of a color. More than a hundred colors have been given a standardized name. See Color chart.#xxxxxxit's the hexadecimal code of a color.coloris a color defined by one of the many color functions known in CSS:rgb()orrgba(),hsl()orhsla(),hwb(),lab(),oklab(),lch(),oklch(),color(),color-mix().
Description of the caret-color property.
Sets the color of the insertion caret. This is the blinking cursor that appears when you click in a text field. The cursor that follows the mouse is not affected by this property.
The color of the insertion caret is of course more visible when it is block-shaped, rather than just a simple blinking vertical line.
To change the shape of the caret, see the caret-shape property.
The insert caret doesn't show up when text is selected, and the selection color isn't the same as the caret.
Also see the following properties regarding the setup of the insert caret and the mouse pointer (cursor):
Values for caret-color.
- caret-color: auto;
Default value. The browser determines the insertion caret color. Most of the time this value is equivalent to
currentColor, unless the cursor shape isblock, in which case the insertion caret takes an intermediate color. - caret-color: currentColor;
The insertion caret is shown in the same color as the text.
- caret-color: transparent;
The insertion caret is invisible.
- caret-color: #00AA00;
The color of the insertion caret is set by its hexadecimal code, in 3, 6, or 8 digits. Check the page on Colors for more details.
- caret-color: lavender;
The color of the insertion caret is defined by its name. See Color chart.
- caret-color: hsl(h, s, l);
The color of the insertion caret is set by one of the many functions reserved for this purpose:
hsl(),rgb(), etc. Check out the page on Colors for the full list of these functions. - caret-color: initial; (
auto) caret-color: inherit; caret-color: revert; caret-color: revert-layer; caret-color: revert-rule; caret-color: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
In all the examples that follow, the shape of the insertion caret has also been changed with caret-shape, to better show the color.
But not all browsers recognize the caret-shape property yet. On Firefox 
, for example, the color change might be hard to notice.
Animation of the caret-color property.
Like all properties that take a color as a value, caret-color can be animated gradually, from one color to another.
Be sure to click in the input area below to make the insertion caret appear. The fact that it blinks makes it hard to notice the animation, but it’s
definitely there.
Access the caret-color property via a program
Change the insertion caret color in Javascript.
Two code examples for changing the value of caret-color are given below. The first uses kebab-case notation for the property name
(a dash to separate the words), and the second is written in camel-case style (a capital letter to separate the words).
let el = document.getElementById('id');
el.style['caret-color'] = 'red';
// or
let el = document.getElementById('id');
el.style.caretColor = 'red';
Read the insertion caret color in JavaScript.
The code given below is the mirror of the previous one: it retrieves the value of caret-color when it has been initialized via the style
attribute of the element. Values assigned through a CSS selector are not taken into account by this code. For that, refer to the following example.
let el = document.getElementById('id');
let value = el.style['caret-color'];
// or
let el = document.getElementById('id');
let value = el.style.caretColor;
Read the computed value of caret-color in Javascript.
The computed value is the one that comes from resolving conflicts between the value(s) assigned to the element via CSS selectors and any inherited values. If there aren't any, the computed value is the property's initial value. Most of the time, there’s no conflict, and the computed value is just the value assigned to the property for the element.
In the case of caret-color, the color is returned in the form rgb(r,g,b), or, if the color's opacity is not total, in the form
rgba(r,g,b,a).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caret-color');
Read or change the value of the caret-color property with JQuery.
Some code examples are given below. JQuery syntax is generally shorter than Javascript syntax.
// Read the value:
$('#id').prop('caret-color');
// Write the value:
$('#id').prop('caret-color', 'red');
$('#id').prop('{caret-color': 'red'});
Read the computed value of the property caret-color with JQuery.
let value = $('#id').css('caret-color');
Other code examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the caret-color property and then display either the value as it was applied or the computed value.
This second option lets you see how the value of caret-color is stored (serialized). You'll notice that colors are always returned in rgb(),
rgba(), ou color() format, no matter how they were assigned.
Simulator.
The insertion caret is a very thin, blinking line. Some colors make it hard to see.
Browsers compatibility with caret-color.
The property caret-color is quite old. All browsers recognize it and handle it correctly, except Internet Explorer 
, but that browser is no longer used.
caret-color property to define the color of the text cursor that appears in editable areas.caret-shape property, which defines the shape of the text cursor (the blinking cursor that shows where the typed character will appear).caret-colorproperty
caret-shapeproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Chrome
Safari
Firefox
Safari sur IOS
Edge
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the caret-color property.
-
CSS Basic User Interface Module Level 3
This specification module groups the properties that interact with the user interface (UI):
cursor,caret-color, etc. It also defines the outline propertiesoutline....Regardingcaret-colorThe ability to choose the color of the text cursor is added, with thecaret-colorproperty.
August 02, 2002Working Draft.
July 07, 2015Candidate Recommendation.
December 14, 2017Proposed for recommendation.
June 21, 2018Recommendation . -
CSS Basic User Interface Module Level 4
This level 4 of the specification builds on the definitions already established in level 3. It also includes some additions: text marker management is more detailed, several properties concern the mouse pointer, etc.
Regardingcaret-colorNo modification to thecaret-colorproperty.
The shorthand propertycaretis added.September 22, 2015Working Draft.
See also, regarding the user interface.
The possibilities for customizing or styling the user interface (UI) are described in the specification CSS Basic User Interface Module of the W3C.
Properties:
interest-delay-start and interest-delay-end.