CSS - caret-color（插入符号颜色）属性_CSS 菜鸟教程

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>

<< CSS - box-decoration-break 属性 CSS - text-shadow（文本阴影）属性 >>