caret-color 仅对含文本插入点的可编辑元素生效：text/search/url/tel/password 类 input、textarea、contenteditable div（Safari 15.4+ 有限支持）；number/date/checkbox 等无效，且受 autofill、系统滤镜、父级 color 等影响。
能直接用，但必须写对元素、写对时机、写对条件——不是所有 input 都认它，写了也不一定变。
哪些元素上 caret-color 真的生效
只对有文本插入点（text insertion point）的可编辑元素起作用：
-
input[type="text"]、input[type="search"]、input[type="url"]、input[type="tel"]—— 全部支持 -
textarea—— 完全支持 -
div[contenteditable="true"]—— 支持有限：Chrome 稳定，Firefox 一直不支持，Safari 15.4+ 才开始有限支持 -
input[type="password"]—— Chrome/Firefox 可用；Safari ≤15.3 有渲染 bug，15.4+ 稳定，但 16.3 前仍偶发闪退
以下完全无效：
-
input[type="number"]、input[type="date"]、input[type="checkbox"]—— 浏览器根本不走文本插入逻辑 - 没加
contenteditable="true"的普通div - 富文本编辑器里你给外层 wrapper 设了
caret-color，但真实编辑区是内层textarea或div[contenteditable]
为什么写了 caret-color 却没变化
最常见原因不是属性不支持，而是条件被破坏或样式被覆盖：
立即学习“前端免费学习笔记（深入）”；
- 被更高优先级规则重置，比如某处写了
input { caret-color: auto !important; }，或 UI 框架（如 Normalize.css）全局设了caret-color: auto - 父级设了
color: transparent，子元素又没显式声明caret-color，导致光标继承为透明（看不见 ≠ 未生效） - Chrome 触发
input:-webkit-autofill后，UA 样式会整块重绘输入区域，把你的caret-color盖掉 —— 这时光标颜色和文字颜色彻底「分家」，手动输正常，自动填就失效 - iOS Safari 在
font-size渲染值小于 16px 时会强制放大并忽略caret-color - Chrome 115+ 启用了系统级“强制颜色滤镜”时，
caret-color可能被浏览器直接忽略
验证是否生效：临时把值设成 red 或 #ff00ff，再检查 DevTools 的 Computed 面板里 caret-color 的最终值是不是你预期的。
怎么写才安全、兼容、不踩坑
不用嵌套 @supports，简洁直接更可靠：
- 统一加标准写法 +
-webkit-caret-color前缀：input, textarea { caret-color: #007bff; -webkit-caret-color: #007bff; }——-webkit-caret-color在新版 Chrome/Firefox 中会被忽略，无副作用；Safari ≤14.1 必须靠它 - 深色模式下别硬写死颜色，配合媒体查询：
@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } } - 对
input[type="password"]单独处理：Safari 15–16.3 存在 bug，可加transform: translateZ(0)触发重绘 - 避免和
outline: none同时用：光标变色不能替代焦点轮廓，否则损害可访问性
移动端和 autofill 场景的不可控点
这些不是代码问题，而是浏览器渲染限制，基本无解，只能接受：
- 安卓 WebView / iOS Safari 软键盘弹出时，
caret-color可能短暂复位或延迟响应 —— 是渲染管线限制，不是样式没加载完 - Chrome autofill 黄底黑字会覆盖整个输入区域，你的
caret-color层叠在最上，但被背景层视觉淹没 —— 此时需额外处理input:-webkit-autofill的背景与文字色，才能让光标重新可见 - Electron 应用若基于旧 Chromium（如禁用 blink 渲染器），即使版本号达标，
caret-color也可能完全失效
真正容易被忽略的是：它不继承、不响应 currentColor、在 macOS Safari 上可能被强制转为深色以保可读性 —— 指定的 #ffffff 实际可能渲染为灰色。
