CSS 属性

CSS caret-color 属性指定插入插入符的颜色，它是指示下一个键入字符将放置的位置的可见标记。它也称为文本输入光标。

插入符号可以在 <input> 或具有 contenteditable 属性的元素中找到。这是一条细垂直线，闪烁以提高可见度。默认情况下它是黑色的，但此属性允许您更改它。

属性值

  • auto: 用户代理选择合适的值插入符号的颜色。颜色通常是currentcolor，但用户代理可以考虑当前颜色、背景、阴影和其他因素，选择不同的颜色以获得更好的可见性。

    注意:即使用户代理也可以使用通常可设置动画的当前颜色作为自动值，它不会在转换和动画期间进行插值。

  • <color>: 的颜色插入符。

插入插入符只是一种类型；浏览器可能有一个用于不可编辑文本的导航插入符号，而带有 auto 属性或某些元素的文本上的 cursor 不是插入符号，而是光标。当鼠标悬停在具有 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: auto 

以下示例演示了属性 caret-color: auto 的使用。我们看到使用默认光标颜色设置样式的输入字段 -

<html>
<head>
<style>
   input {
      caret-color: auto;
      margin-bottom: 10px;
      padding: 5px;
   }
</style>
</head>
<body>
   <input value="默认光标颜色." size="65" />
</body>
</html>

CSS caret-color: transparent 

以下示例演示了 caret-color: transparent 。这里输入字段的样式是透明光标 -

<html>
<head>
<style>
   input {
      caret-color: transparent;
      margin-bottom: 10px;
      padding: 5px;
   }
</style>
</head>
<body>
   <input value="透明光标." 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="默认光标颜色." 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="光标为橙色." size="65" />
   <input class="box2" value="光标为蓝色." size="65" />
   <input class="box3" value="光标为黄色." size="65" />
   <input class="box4" value="光标为粉色." size="65" />
</body>
</html>