caret-shape

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

CSS 中的 caret-shape 属性更改了可编辑元素中文本光标的形状,该光标指示用户正在输入。它是 CSS 基本用户界面模块级别 4 的一部分,该模块目前处于工作草案状态。

当我写作时,光标是跟随我输入的每个字符的小型闪烁条。

我们可以使用 caret-shape 将该条更改为其他内容,例如,一个块。

.element {
  caret-shape: block;
}

这将产生一个更类似于您在命令行中键入时可能看到的光标。

语法

caret-shape: auto | bar | block | underscore
  • 初始值: auto
  • 应用于: 接受输入的元素
  • 继承:
  • 百分比: 不适用
  • 计算值: 指定的关键字
  • 动画类型: 按计算值

caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

目前我们对 caret-shape 的浏览器支持并不多(见下文),但以下是这些值的渲染结果。

The words this is a bar caret, followed by a blinking vertical bar that's about one pixel wide.
caret-shape: bar;
The words this is a block caret, followed by the letter x with a blinking light gray background behind it.
caret-shape: block;
The words this is an underscore caret, followed by the letter x with a blinking horizontal black underline beneath it.
caret-shape: underscore;

浏览器支持

Caniuse 中似乎没有提供任何数据,但通过一些快速测试,我发现如下情况。

IEEdgeFirefoxChromeSafariOpera
全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera 移动版

我们可以“伪造”它

虽然浏览器支持就是这样,但我们实际上可以使用其他 CSS 魔法来复制效果。

这就是这种打字机动画中使用的东西。

更多信息