MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

/* 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);
附注:一些浏览器可能还会把该属性应用到别的类型的光标中,比如有一种光标叫做“导航光标“(navigation caret),它和我们上面说的“插入光标”(insertion caret)不同的是,导航光标是在不可编辑区域内来回移动的,而不是在可编辑区域内。

此外,当鼠标指针移动到一段文本上方时的样子虽然看起来有点像插入光标(也是一个竖杠,但上下方各多了两个角,而且不会闪动,此刻你把鼠标指针移动到这段文本上就会看到它),但它不是插入光标(caret),而是鼠标指针光标(cursor)。

初始值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

语法

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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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
Candidate Recommendation Initial definition.

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57

Edge 38.1

53.0 (53.0)

Internet Explorer 11 

44

未实现 

system caret

Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57 57 53.0 (53.0) 未实现

font color

44 未实现

system caret

文档标签和贡献者

 此页面的贡献者: ziyunfei
 最后编辑者: ziyunfei,