The caret-color
CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. 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.
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).
/* 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);
auto
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 of currentcolor
, the background, shadows, and other factors. Note: While user agents may use currentcolor
(which is usually animatable) for the auto
value, auto
is not interpolated in transitions and animations.
<color>
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>
<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>
input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; }
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'caret-color' in that specification. | Recommendation | Initial definition. |
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Media | interactive |
Computed value |
auto is computed as specified and <color> values are computed as defined for the color property. |
Animation type | a color |
Canonical order | per grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 57 | No | 53 | No | 44 | 11.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 57 | 57 | No | 53 | 44 | 11.1 | 7.0 |
<input>
elementcontenteditable
attribute, which can be used to make any element's text editable<color>
data typecolor
, background-color
, border-color
, outline-color
, text-decoration-color
, text-emphasis-color
, text-shadow
, caret-color
, and column-rule-color
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color