caret-color

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

附注:上面说的“插入光标”(insertion caret)只是光标(caret)的其中一种。比如一些浏览器有一种光标叫做“导航光标“(navigation caret),它可以在不可编辑区域内来回移动。此外,当鼠标指针移动到一段 cursor 属性是 auto 的文本上方时,或移动到 cursor 属性是 textvertical-text 的內容上方時,虽然看起来有点像插入光标,但它不是插入光标(caret),而是鼠标指针光标(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 来作为插入光标的颜色,但浏览器可能还会根据当前的背景色、阴影色等来对该颜色进行适当的调整以确保该插入光标具有良好的可见性。

附注:auto 属性值在 CSS  transitions/animations 中是不支持颜色插补(interpolated)的

<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>

示例

HTML

<input />

CSS

input {
  caret-color: red;
}

示例演示

规范

Specification Status Comment
CSS Basic User Interface Module Level 3
caret-color
Recommendation Initial definition.
初始值auto
适用元素all elements
是否是继承属性yes
适用媒体interactive
计算值auto is computed as specified and <color> values are computed as defined for the color property.
Animation typea color
正规顺序per grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
caret-colorChrome Full support 57Edge No support NoFirefox Full support 53IE No support NoOpera Full support 44Safari Full support 11.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 53Opera Android Full support 43Safari iOS Full support 11.3Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support