caret-color CSS 属性

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

取值：
caret-color 是一个 CSS 属性，它用于设置元素（特别是 <input> 元素或具有 contenteditable 属性的元素）的插入光标（caret）的颜色。caret-color 属性接受以下类型的值：

预定义颜色关键字：例如 red、blue、green 等。
十六进制颜色：例如 #FF0000（红色）、#00FF00（绿色）等。
RGB、RGBA、HSL、HSLA：这些都是 CSS 颜色表示方法，允许你以不同的方式指定颜色。例如 rgb(255, 0, 0)（红色）、rgba(255, 0, 0, 0.5)（半透明的红色）、hsl(0, 100%, 50%)（红色）等。
currentColor：这个关键字表示使用当前元素的 color 属性的值作为光标颜色。
transparent：这个关键字表示光标将是透明的，即不可见。
auto：浏览器将决定光标的颜色。通常，如果元素的 color 属性设置为文本颜色，那么 auto 通常会使光标颜色与文本颜色相同，但在某些浏览器和元素类型中可能有所不同。

input {
    color: blue;  /* 改变输入框内文字的颜色 */
    caret-color: red;  /* 改变输入框光标的颜色 */
}

在这个例子中，输入框内的文字颜色被设置为蓝色，而光标的颜色被设置为红色。

此外，caret-color 属性不仅对于原生的输入表单控件有效，对于设置了 contenteditable 属性的普通 HTML 标签也适用。例如：

<div contenteditable="true">文字蓝色，光标黄色</div>

配合 CSS 样式：

[contenteditable="true"] {
    color: blue;  /* 改变可编辑区域内文字的颜色 */
    caret-color: yellow;  /* 改变可编辑区域光标的颜色 */
}

在这个例子中，可编辑区域内的文字颜色被设置为蓝色，而光标的颜色被设置为黄色。

查看案例效果：https://jsrun.net/2r5Kp/

caret-color 属性的值可以是 auto 或一个具体的颜色值。当值为 auto 时，光标颜色将使用 Web 浏览器中的当前颜色。当值为一个具体的颜色值时，可以使用所有 CSS 支持的颜色表示方式，如 RGB、十六进制、命名颜色等。

兼容性：