caret-color在Safari 11.0及更早、所有IE、Android 4.4–6.0 WebView、Electron旧Chromium（如9x）、iOS 15.3及更早设备中完全不生效，Samsung One UI等厂商系统还可能强制覆盖该值。
caret-color 在哪些浏览器里根本不会生效
Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 原生支持 caret-color，但 Safari 11.0 及更早、所有 IE、Android 4.4–6.0 WebView、Electron 基于旧 Chromium（如 9x）的应用会静默忽略该属性——DevTools 的 Computed 面板里压根不显示它，也不会报错或回退。iOS 15.3 及更早设备同样不支持，而 Samsung One UI 等厂商系统甚至可能强制覆盖你写的值。
为什么写了 caret-color 却没变化
常见原因和浏览器是否支持无关，而是样式没落到真实可编辑节点上：
-
input[type="number"]、input[type="date"]在 WebKit/Chromium 中被硬编码禁用caret-color，加!important也没用 - 框架 scoped style 或 shadow DOM 封装了
input，你写的规则作用在父容器而非原生输入节点 - 父级设了
color: transparent，而caret-color不继承，子元素又没显式声明，结果光标透明不可见 - 某些 reset.css（如 normalize.css）全局设了
caret-color: auto，把你自定义的值覆盖了 - iOS Safari 在
font-size渲染值小于 16px 时会强制放大并忽略caret-color
怎么安全兼容旧浏览器和特殊场景
不能只靠 @supports (caret-color: auto) 做检测——Safari 15.4 前版本连这个查询都不支持，会导致误判。真正落地的写法是：
- 基础色必须前置：先写
caret-color: #007bff，再写caret-color: var(--cursor-color, #007bff)；IE 会跳过第二行，现代浏览器覆盖第一行 - 加前缀兜底（无害）：
-webkit-caret-color: #007bff，Safari ≤14.1 需要，新版自动忽略 - 深色模式下别硬写死颜色，配合媒体查询：
@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } } - 密码输入框在 Safari 15–16.3 存在闪退 bug，可加
transform: translateZ(0)触发重绘 - 移动端 iOS Safari 对
caret-color响应略慢，建议加transition: caret-color 0.1s（注意：该 transition 实际仅在 Chrome 中有效）
contenteditable 元素中 caret-color 为何基本不可靠
Firefox 一直不支持 caret-color 用于 contenteditable；Safari 直到 15.4 才开始有限支持；Chrome 表现也不稳定。更关键的是，它必须显式写在 div[contenteditable="true"] 上，不能靠父级继承——哪怕你给 <table> 设了，<code><td contenteditable="true"> 也不会生效。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>若项目必须支持旧环境或强一致性，放弃 <code>caret-color 是更现实的选择：用 JavaScript 监听 focusin，在光标位置插入绝对定位元素模拟光标，并控制其颜色与 blink 动画。但要注意，这种方案会破坏屏幕阅读器等辅助技术的焦点识别，且无法精准跟随软键盘弹出后的光标坐标。
真正容易被忽略的是：macOS Safari 有时会强制将浅色光标转为深色以保证可读性，导致指定的 #ffffff 实际渲染为灰色；另外，某些 Electron 应用即使 Chromium 版本达标，也可能因禁用 blink 渲染器而使 caret-color 失效。
