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
特性为
auto
, or when hovering over an element where the
cursor
特性为
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.
注意：
While user agents may use
currentcolor
(which is usually animatable) for the
auto
value,
auto
is not interpolated in transitions and animations.
<color>
The color of the caret.
| 初始值 |
auto
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 |
auto
is computed as specified and
<color>
values are computed as defined for the
color
特性。
|
| 动画类型 | a 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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Basic User Interface Module Level 3
The definition of 'caret-color' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
caret-color
|
Chrome 完整支持 57 | Edge 完整支持 79 | Firefox 完整支持 53 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 11.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 53 | Opera Android 完整支持 43 | Safari iOS 完整支持 11.3 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
<input>
element
contenteditable
attribute, which can be used to make any element's text editable
<color>
data type
color
,
background-color
,
border-color
,
outline-color
,
text-decoration-color
,
text-emphasis-color
,
text-shadow
,
caret-color
，和
column-rule-color