caret-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

尝试一下

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

#example-element {
  font-size: 1.2rem;
}

附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一段 cursor 属性是 auto 的文本上方时，或移动到 cursor 属性是 text、 vertical-text 的內容上方時，虽然看起来有点像插入光标，但它不是插入光标（caret），而是鼠标指针光标（cursor）。

语法

css
/* 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>

所指定的插入光标的颜色值。

正式语法

caret-color = 
  auto     |
  <color>

示例

HTML

html
<input />

CSS

css
input {
  caret-color: red;
}

示例演示

规范

Specification
CSS Basic User Interface Module Level 4
# caret-color
初始值auto
适用元素所有元素
是否是继承属性是
计算值auto is computed as specified and <color> values are computed as defined for the color property.
动画类型a color

浏览器兼容性