试一试
caret: red;
caret: block manual;
caret: underscore auto green;
caret: bar manual orange;
<section class="default-example container" id="default-example">
<div>
<label for="example-element">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* Individual values */
caret: red; /* caret-color only */
caret: block; /* caret-shape only */
caret: manual; /* caret-animation only */
/* Two values */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Three values */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Global values */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
caret 属性通过其组成属性的一个、两个或三个值来指定。值可以按任何顺序指定，省略的值将设置为其初始值。
值
caret-color-
设置插入符的颜色。
caret-animation-
控制插入符是否闪烁。
caret-shape-
设置插入符的视觉形状。
描述
caret 简写属性允许您在一个声明中设置多个插入符属性，方便自定义插入符的完整外观和行为。
值解析
当简写属性中省略值时，它们会重置为初始值
caret-color:auto(解析为currentColor)。caret-animation:auto(插入符闪烁)。caret-shape:auto(浏览器确定的形状)。
顺序独立性
与某些 CSS 简写属性不同，caret 属性接受任何顺序的值。浏览器根据值类型确定哪个值适用于哪个属性
<color>值适用于caret-color。auto/manual关键字适用于caret-animation。- 形状关键字（
bar、block、underscore）适用于caret-shape。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 接受输入的元素 |
| 继承性 | 是 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
正式语法
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
示例
带有动画插入符的复古终端
此示例使用 caret 简写属性结合多个插入符属性，创建一个复古终端界面，演示了它如何取代旧的基于边框的技术。
caret 简写属性的主要优点是在一个声明中组合多个属性。在这里，我们将形状设置为 block，禁用默认闪烁，并将颜色设置为 green，所有这些都在一行中完成。
HTML
html
<label for="terminal">Enter a command</label>
<div class="old-screen">
<span>></span>
<textarea id="terminal" class="terminal-input"></textarea>
</div>
CSS
css
.terminal-input {
caret: block manual green;
animation: vintage-caret 2s infinite;
}
@keyframes vintage-caret {
0%,
50% {
caret-color: #00ad00;
}
75%,
100% {
caret-color: transparent;
}
}
结果
规范
浏览器兼容性
加载中…