DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
在 CSS 中,caret
是一个简写属性,它将caret-color
和 caret-shape
属性组合到一个声明中。因此,我们可以这样写
.element {
caret: #ff7a18 underscore;
}
…这类似于这样写
.element {
caret-color: #ff7a18;
caret-shape: underscore;
}
当您想要更改插入符号的颜色和形状时,这是一个很好的快捷方式。什么是插入符号?您可能最熟悉在可编辑元素(例如文本输入或文本区域)中键入时看到的插入符号。我正在 WordPress 中撰写这篇文章,它基本上是一个巨大的表单字段,这就是我看到的在我眼前闪烁的插入符号

因此,通过将 caret-color
设置为(例如)#ff7a18
,并将 caret-shape
设置为类似 underscore
的值,我们可能会看到类似以下内容

语法
caret: <'caret-color'> || <'caret-shape'>
语法可以采用一个值或另一个值……或者两者兼而有之!如果某个值为空,则使用其初始值,对于两个组成属性,初始值均为 auto
。
- 初始值:
auto
- 应用于:接受输入的元素
- 继承:是
- 百分比:n/a
- 计算值:请参阅各个属性
- 动画类型:不可动画
值
caret: #ff7a18 underscore;
caret: yellow block;
caret: hsla(50, 100%, 50%, 0.75) bar;
/* Keyword color values */
caret: auto;
caret: transparent block;
caret: currentcolor underscore;
/* Global values */
caret: inherit;
caret: initial;
caret: unset;
浏览器支持
目前没有。该属性最初在 CSS 基本用户界面模块级别 4 规范 中定义,该规范目前处于编辑草案阶段。这意味着在它成为浏览器实施的建议之前,仍然有可能进行更改。
同时,我们可以使用一些其他 CSS 魔法来“模拟”caret
属性。