Css 简明教程

CSS - caret-color

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

CSS caret-color property specifies the color of the insertion caret, which is the visible marker indicating where the next typed character will be placed. It is also known as the text input cursor.

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

The caret is found in elements such as <input> or those with contenteditable attribute. This is a thin vertical line, flashing to enhance visibility. It is black by default, but this property allows you to change it.

Possible Values

  1. auto − The user agent chooses a suitable colour for the caret. The color is commonly currentcolor, but the user agent may select for a different one for better visibility, considering currentcolor, background, shadows, and other factors.

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

Note: Even user agents can use the normally animatable currentcolor for the auto value, it is not interpolated during transitions and animations.

  1. <color> − Color of the caret.

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

The insertion caret is just one type; browsers may have a navigation caret for non-editable text, while the cursor over text with the auto property or certain elements is not a caret but a cursor. The mouse cursor image appears as a caret when hovering over text with the auto property or over an element with text or vertical-text property, but it is actually a cursor, not a caret.

Applies to

所有元素。

All elements.

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 属性的使用。我们看到输入字段采用默认光标颜色进行样式设定 −

The following example demonstrates use of property caret-color: auto. We see input field styled with a default cursor color −

<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 属性。在此处，输入字段采用透明光标进行样式设定 −

The following example demonstrates the caret-color: transparent property. Here input field is styled with a transparent cursor −

<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 。它将光标颜色设置为文本颜色（蓝色） −

The following example demonstrates the caret-color: currentcolor. This sets the color of the cursor to the text color (blue) −

<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 属性来设置具有不同光标颜色的输入元素样式 −

The following example demonstartes how to use caret-color property for styling of input elements with different cursor colors −

<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>