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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note that the insertion caret is only one type of caret. For example, many browsers have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the mouse cursor image shown when hovering over text where the cursor
property is auto
, or when hovering over an element where the cursor
property is text
or vertical-text
, though it sometimes looks like a caret, is not a caret (it’s a cursor).
Syntax
/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;
/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
Values
auto
- The user agent selects an appropriate color for the caret. This is generally
currentcolor
, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value ofcurrentcolor
, the background, shadows, and other factors.Note: While user agents may use
currentcolor
(which is usually animatable) for theauto
value,auto
is not interpolated in transitions and animations. <color>
- The color of the caret.
Formal definition
Initial value | auto
|
Applies to | all elements |
Inherited | yes |
Computed value | auto is computed as specified and <color> values are computed as defined for the color property.
|
Animation type | a color |
Formal syntax
auto | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
Examples
Setting a custom caret color
HTML
<input value="This field uses a default caret." size="64"/>
<input class="custom" value="I have a custom caret color!" size="64"/>
<p contenteditable class="custom">This paragraph can be
edited, and its caret has a custom color as well!</p>
CSS
input {
caret-color: auto;
display: block;
margin-bottom: .5em;
}
input.custom {
caret-color: red;
}
p.custom {
caret-color: green;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3The definition of 'caret-color' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
caret-color
|
Chrome
Full support 57 |
Edge
Full support 79 |
Firefox
Full support 53 |
IE
No support No |
Opera
Full support 44 |
Safari
Full support 11.1 |
WebView Android
Full support 57 |
Chrome Android
Full support 57 |
Firefox Android
Full support 53 |
Opera Android
Full support 43 |
Safari iOS
Full support 11.3 |
Samsung Internet Android
Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- The
<input>
element - The HTML
contenteditable
attribute, which can be used to make any element's text editable - Making content editable
- Applying color to HTML elements using CSS
- The
<color>
data type - Other color-related properties:
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, andcolumn-rule-color
caret-color by Mozilla Contributors is licensed under CC-BY-SA 2.5.