caret-color 属性在 Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 原生支持，但 Safari 11.0 及更早、所有 IE、Android 4.4 WebView 完全不支持，且对 contenteditable 支持差，需结合伪元素、透明文字遮罩或 JS 模拟实现兼容。
caret-color 属性在主流浏览器中的实际支持情况
caret-color 是 CSS3 中用于直接控制文本输入框（、）光标颜色的标准属性，Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 均原生支持。但 Safari 11.0 及更早版本、所有 IE 版本、部分安卓 WebView（如 Android 4.4 内置浏览器）完全不识别该属性，此时会静默忽略——不会报错，也不会回退到默认光标色。
为什么不能只靠 caret-color 设置光标颜色
仅用 caret-color 无法覆盖所有场景：当输入框获得焦点但未处于编辑状态（比如被 pointer-events: none 阻断、或父元素 opacity: 0 导致渲染异常），部分旧版 Chrome/Firefox 仍可能显示系统默认光标；更关键的是，caret-color 对 contenteditable 元素的支持不稳定（Firefox 一直不支持，Safari 仅从 15.4 开始有限支持）。
兼容性 fallback 的实操方案
真正可靠的降级不是“加个备用色”，而是结合伪元素与 focus 状态模拟视觉光标：
- 对原生
和，优先用caret-color: #ff6b6b，再叠加input:focus, textarea:focus { outline: none }避免双光标干扰 - 对需要兼容 IE 或老安卓 WebView 的项目，改用
::selection+ 透明文字遮罩法：给输入框设置color: transparent，再用::placeholder和::selection配合背景色模拟高亮效果（局限是仅适用于单行文本） - 对
contenteditable区域，必须放弃caret-color，改用 JavaScript 监听focusin事件，在光标位置插入一个绝对定位的元素并控制其颜色和 blink 动画
容易被忽略的细节和坑
caret-color 不继承，必须显式写在可编辑元素上；它不响应 currentColor 的动态变化（即修改父级 color 不会联动更新光标色）；在 macOS 上，Safari 有时会强制将浅色光标转为深色以保证可读性，导致指定的 #ffffff 实际渲染为灰色；另外，某些 Electron 应用（基于旧 Chromium）即使版本号达标，也可能因禁用 blink 渲染器而使 caret-color 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
