插入符颜色属性
最后更新：2026-09-13
caret-color 插入符颜色属性
caret-color 用于设置输入框、文本区域等可编辑元素中插入符（光标闪烁的竖线）的颜色。通过自定义插入符颜色，可以让表单元素与页面整体配色保持一致，或用于突出显示当前输入位置。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
caret-color: auto | <color>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 默认光标色 |
<color> | 类型 | 光标颜色 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| caret-color | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： auto 是默认值，插入符颜色通常与元素的文字颜色相同；设置为具体颜色可以独立控制。
提示： caret-color 是可继承属性，可以在父元素统一设置，子元素会继承该颜色。
❓ 常见问题
Qcaret-color 支持哪些颜色格式？
A所有 CSS 颜色格式都支持：关键字（red、blue）、十六进制（#3498db）、rgb()/rgba()、hsl()/hsla()，以及 currentColor 等特殊值。auto 是默认值，插入符颜色跟随元素文字颜色。它还支持 transition 动画颜色变化，虽然实际使用中较少见。
Qcaret-color 和 cursor 有什么区别？
Acaret-color 设置输入框/文本区域内「文本插入符」（闪动的竖线）的颜色，属于可编辑内容；cursor 设置鼠标指针悬停在元素上时的形状，属于指针设备反馈。两者名字相近但作用对象完全不同，一个是内容光标、一个是鼠标指针。
Q为什么设置了 caret-color 却没有效果？
A检查是否应用在了可编辑元素上（input、textarea、contenteditable 元素），不可编辑的普通文本没有插入符；另外如果系统处于高对比度等强制外观模式，浏览器可能覆盖自定义颜色。主流浏览器（Chrome、Firefox、Safari、Edge）均支持，但 Safari 旧版本对部分写法支持不全。
Qcaret-color 能应用在 contenteditable 元素上吗？
A可以。contenteditable 元素和 input/textarea 一样有文本插入符，caret-color 同样生效，因此可以给富文本编辑器、可编辑标题等元素统一设置插入符颜色，配合设计系统使用。它是可继承属性，在父容器设置后子元素会继承该颜色。
🏷️ 相关属性
💡 相关案例
📚 相关教程
