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
的浏览器支持并不多(见下文),但以下是这些值的渲染结果。

caret-shape: bar;

caret-shape: block;

caret-shape: underscore;
浏览器支持
Caniuse 中似乎没有提供任何数据,但通过一些快速测试,我发现如下情况。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 否 | 否 | 否 | 否 | 全部 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera 移动版 |
---|---|---|---|---|
否 | 否 | 否 | 否 | 否 |
我们可以“伪造”它
虽然浏览器支持就是这样,但我们实际上可以使用其他 CSS 魔法来复制效果。
这就是这种打字机动画中使用的东西。
更多信息
- CSS 基本用户界面模块级别 4(工作草案)