npm 配了八年富文本编辑器，今天才发现输入框光标从来没被原生管过——今天这件事被 caret-shape 彻底原生化了

光标形状这个问题，所有人每天都在遇到，但 CSS 从来没管过这件事。

做富文本编辑器的、搭在线 IDE 的、写命令行风格页面的，想把输入框里的闪烁竖线改成方块或下划线，传统方案只有两条路：忍着或者用 div 模拟一个假的输入框。第二条路还有个名字——contenteditable div + 自己做选区管理，一套下来几百行，还经常和浏览器原生行为打架。

Chrome 144（2026 年 1 月）把这个坑填上了。caret-shape 是 CSS Basic User Interface Module Level 4 里的属性，直接控制输入框光标的形状，语法就四个字：

/* 四个字控制光标形状 */
caret-shape: bar;        /* 默认竖线，夹在字符中间 */
caret-shape: block;      /* 方块，覆盖下一个字符，像命令行 */
caret-shape: underscore; /* 下划线，在字符下方 */
caret-shape: auto;       /* 浏览器自己定，通常等价于 bar */

光标颜色和闪烁行为也一起管了，用 caret 这个简写属性一步到位：

/* 三件事一行搞定：颜色 + 形状 + 停止闪烁 */
.my-terminal textarea {
  caret-color: lime;
  caret-shape: block;
  caret-animation: manual; /* 关闭默认闪烁，自己用 animation 控制 */
}

/* 彩虹光标：Chrome 139+ caret-animation 配合 */
@keyframes caret-rainbow {
  0%   { caret-color: #00d2ff; }
  25%  { caret-color: #ff6b6b; }
  50%  { caret-color: #feca57; }
  75%  { caret-color: #48dbfb; }
  100% { caret-color: #00d2ff; }
}

这个功能是 Igalia 在 Chromium 里实现的，Bloomberg 赞助，2025 年还在 experimental flag，Chrome 144 稳定版正式支持。现在全球覆盖率约 63.73%，只有 Chrome 和 Edge 两个引擎，Safari 和 Firefox 还在路上。

三个真实场景

第一个是命令行风格页面。想做一个复古终端效果，传统方案是给一个 div 加边框假装光标，现在直接：

input[type="text"], textarea {
  font-family: "Courier New", monospace;
  caret-shape: block;
  caret-color: lime;
  caret-animation: manual;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { caret-color: lime; }
  50%       { caret-color: transparent; }
}

第二个是代码编辑器。块状光标比竖线更醒目，能更清楚地看到下一个字符会被覆盖——这就是 overtype 模式的视觉反馈。现在直接用 caret-shape: block 表达模式，不需要 UI 说明。

第三个是表单无障碍。视力障碍用户可以把光标设成高对比度的 underscore，配合 caret-color: yellow，在深色模式下更容易找到当前位置。

三个坑

Chrome 144 之前是 experimental flag 阶段，要开 chrome://flags#enable-experimental-web-platform-features，现在稳定版不用开了。

Safari 和 Firefox 还不支持，全球覆盖率 ~63.73%，生产环境用之前必须 feature detection：

/* 渐进增强写法 */
@supports (caret-shape: block) {
  .terminal-input { caret-shape: block; }
}

第三个坑最隐蔽：caret-shape 只管视觉形状，不管光标的逻辑位置。方块光标覆盖了下一个字符，但光标实际插出的位置还是字符与字符之间——不要误以为覆盖就是替换，那是两个完全不同的概念。

下一步

三步走：第一，打开浏览器控制台，在任意 <textarea> 上试一行 caret-shape: block，看看效果；第二，给你的终端风格页面加 @supports 渐进增强；第三，把 caret/caret-animation/caret-color 三个子属性一起摸一遍，这套组合起来能做出相当精细的光标控制，比当年用 div 模拟的方案干净得多。

等 Safari 和 Firefox 支持之后，这套属性会成为富文本编辑器和代码编辑器的事实标准——现在布局已经可以先做进去了。