插入光标颜色 | caret-color

caret-color

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）不同的是，导航光标是在不可编辑区域内来回移动的，而不是在可编辑区域内。

初始值	auto
适用元素	all elements
是否是继承属性	yes
适用媒体	interactive
计算值	auto is computed as specified and <color> values are computed as defined for the color property.
Animation type	a color
正规顺序	per grammar

语法

值

auto

附注：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 value="This field uses a default caret." />
<input class="custom" value="I have a custom caret color!" />

CSS

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}

结果

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'caret-color' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57 1	No support 2	53.0 (53.0) 3	No support	44	No support 4 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)	No support font color	44	No support system caret