Css 简明教程

CSS - caret-color

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

插入光标位于诸如 <input> 这样的元素中，或带有 contenteditable 属性的元素中。它是一条细的垂直线，闪烁以增强可见性。默认情况下为黑色，但此属性允许您更改它。

Possible Values

  1. auto − 用户代理为插入光标选择合适的颜色。颜色通常为 currentcolor ，但用户代理可以考虑到 currentcolor 、背景、阴影和其他因素选择不同的颜色以提高可见性。

注意：即使用户代理也可以将通常可动画的 currentcolor 用于 auto 值，但它不会在转换和动画过程中进行插值。

  1. &lt;color&gt; − 插入光标的颜色。

插入光标只是一种类型；对于不可编辑文本，浏览器可能具有导航光标；而对于具有 auto 属性的文本或某些元素， cursor 不是光标而是游标。鼠标光标图像在鼠标悬停在带有 auto 属性的文本上或带有 text 或 vertical-text 属性的元素上时显示为光标，但它实际上是游标，而不是光标。

Applies to

所有元素。

Syntax

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: hsl(228deg 4% 24% / 80%);

CSS caret-color - auto Value

以下示例演示了 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 - transparent Value

以下示例演示了 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 Value

以下示例演示了 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> Values

以下示例演示了如何使用 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>