CSS caret-color 属性指定插入符号的颜色，它是指示下一个键入字符将放置在何处的可见标记。它也被称为文本输入光标。
插入符号位于 <input> 等元素或具有 contenteditable 属性的元素中。这是一条细的垂直线，闪烁以增强可见性。默认情况下它是黑色的，但此属性允许您更改它。
可能的值
- auto − 用户代理为插入符号选择合适的颜色。颜色通常是 currentcolor，但考虑到 currentcolor、背景、阴影和其他因素，用户代理可能会选择不同的颜色以获得更好的可见性。
- 注意：即使是用户代理也可以使用通常可动画的 currentcolor 作为自动值，它不会在过渡和动画期间进行插值。
- <color> - 插入符号的颜色。
插入符号只是一种类型;浏览器可能具有用于不可编辑文本的导航插入符号，而将光标放在具有 auto 属性或某些元素的文本上不是插入符号，而是光标。将鼠标悬停在具有 auto 属性的文本上或将鼠标悬停在具有 text 或 vertical-text 属性的元素上时，鼠标光标图像将显示为插入符号，但它实际上是光标，而不是插入符号。
适用于
所有元素。
语法
关键字值
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;
<color> 值
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);
CSS caret-color - 自动值
以下示例演示了属性 caret-color： auto 的用法。我们看到输入字段的样式为默认光标颜色 -
<html>
<head>
<style>
input {
caret-color: auto;
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<input value="Deafult cursor color." size="65" />
</body>
</html>
CSS caret-color - 透明值
以下示例演示了 caret-color： transparent 属性。这里输入字段的样式是透明光标 -
<html>
<head>
<style>
input {
caret-color: transparent;
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<input value="Transparent cursor." size="65" />
</body>
</html>
CSS caret-color - currentcolor 值
以下示例演示了caret-color：currentcolor。这会将光标的颜色设置为文本颜色（蓝色） -
<html>
<head>
<style>
input {
color: blue;
border: 3px solid black;
padding: 5px;
caret-color: currentColor;
}
</style>
</head>
<body>
<input value="Deafult cursor color." size="65" />
</body>
</html>
CSS caret-color - <color>值
以下示例演示了如何使用 caret-color 属性来设置具有不同光标颜色的输入元素的样式 -
<html>
<head>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
.box1 {
caret-color: orange;
}
.box2 {
caret-color: #5729e9;
}
.box3 {
caret-color: rgb(241, 245, 20);
}
.box4 {
caret-color: hsla(320, 77%, 58%, 0.8);
}
</style>
</head>
<body>
<input class="box1" value="The cursor is orange colored." size="65" />
<input class="box2" value="The cursor is blue colored." size="65" />
<input class="box3" value="The cursor is yellow colored." size="65" />
<input class="box4" value="The cursor is pink colored." size="65" />
</body>
</html>
