caret-color 只对可编辑文本元素生效，需显式设置：text/search/url/tel 类 input、textarea、contenteditable div（Safari 15.4+/Firefox 120+）；number/checkbox/radio 等无效，常见失效原因为样式未命中焦点节点、被 !important 覆盖、继承透明色或系统滤镜干扰。
直接写 caret-color 就能改，但只对可编辑文本元素生效，且必须显式设置、不能靠继承，否则大概率没反应。
哪些 input 上 caret-color 真的起作用
只对有真实插入点（text insertion point）的元素有效：
-
input[type="text"]、input[type="search"]、input[type="url"]、input[type="tel"] textarea-
div[contenteditable="true"]（注意：仅 Safari 15.4+、Firefox 120+ 开始稳定支持）
以下情况完全无效：
-
input[type="number"]、input[type="checkbox"]、input[type="radio"]—— 它们压根不走文本插入逻辑 - 没加
contenteditable="true"的div或其他容器 - 富文本编辑器里你设了外层 wrapper，但焦点实际落在内层
textarea或另一个div[contenteditable]上
写了 caret-color 却没变色的常见原因
不是浏览器不支持，而是样式没落到真正接收焦点的节点上：
立即学习“前端免费学习笔记（深入）”；
- 被更高优先级规则覆盖，比如某处写了
input { caret-color: auto !important; }，或 UI 框架（如 Normalize.css）全局重置为auto - 父级设置了
color: transparent，子元素又没显式声明caret-color，导致光标继承为透明（看不见 ≠ 没生效） - iOS Safari 对
font-size渲染异常时，caret-color可能被忽略（哪怕你写的是1rem） - Chrome 115+ 启用系统级“强制颜色滤镜”后，该属性会被浏览器直接跳过
验证是否生效：临时设成高对比色如 red 或 #ff00ff，再打开 DevTools 的 Computed 面板，查 caret-color 最终计算值是不是你写的那个。
怎么写才稳妥、少踩坑
不用 @supports 套嵌，也不必 JS 检测，简洁写法更可靠：
- 统一加标准写法 +
-webkit-caret-color前缀：input, textarea { caret-color: #007bff; -webkit-caret-color: #007bff; }—— 新版 Chrome/Firefox 忽略前缀无副作用，Safari ≤14.1 必须靠它 - 深色模式下别写死颜色，配合媒体查询：
@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } } -
input[type="password"]在 Safari 15–16 仍有渲染 bug（截至 2026 年 6 月），建议单独跳过自定义，或降级为仅改color - 别指望
caret-color响应currentColor—— 修改父级color不会联动更新光标色
最常被忽略的一点：移动端某些 Electron 应用（基于旧 Chromium）即使版本号达标，也可能因禁用 blink 渲染器而让 caret-color 完全失效 —— 这时候得换 JS 模拟方案，而不是反复调样式。
