caret-color仅对可编辑元素生效，必须显式设置且不继承；常见失效原因是被高优先级规则覆盖、元素未获焦点或不可编辑，如disabled状态或非文本类input。
直接给 input 或 textarea 加 caret-color 就能改光标颜色，但要注意它不继承、不触发重绘、且在某些伪类下会失效。
为什么写了 caret-color 没反应？
最常见原因是样式被更具体的规则覆盖，或目标元素没进入可编辑状态：
-
caret-color只对可编辑元素生效（input、textarea、contenteditable元素），普通div无效 - 它不会从父元素继承，必须显式写在目标元素上（比如
input { caret-color: red; }） - 如果元素被禁用（
disabled），该属性会被忽略 - 部分浏览器在
:focus-within或:has()等复杂选择器里不识别该属性
caret-color 和 color 的关系
caret-color 默认值是 auto，此时光标颜色取自文本颜色（color）。但二者完全独立：
- 显式设置
caret-color: #00f后，光标就固定为蓝色，哪怕color改成灰色也不变 -
caret-color: currentColor是安全写法，能自动跟随color变化，适合主题切换场景 - 不推荐用
transparent——虽然合法，但会导致光标不可见，用户无法判断输入位置
兼容性与降级处理
Chrome 57+、Firefox 53+、Safari 11.1+ 支持，IE 完全不支持。需要降级时注意：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（
- 没有可靠的 CSS fallback 方案，不要试图用
text-shadow或伪元素模拟光标 - 如果项目需兼容老 Safari，只能接受“不控制光标色”或改用 JS 动态插入/移动真实光标元素（成本高、易出错）
- 建议搭配
@supports (caret-color: auto)做渐进增强，避免干扰其他样式
真正容易被忽略的点是：光标颜色变化不会触发 layout 或 paint，所以即使你在 JS 中动态修改 caret-color，也不会有闪烁或抖动——但这同时也意味着你不能靠它做视觉反馈动画。
