caret

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

在 CSS 中,caret 是一个简写属性,它将caret-colorcaret-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 属性。