caret-color仅对可编辑文本元素生效：input[type="text/search/url/tel"]、textarea、contenteditable元素；对checkbox、radio、number等无效，且不继承、需显式设置并确保浏览器支持及焦点状态。
直接用 caret-color 就能改，但必须写对元素、写对时机、写对浏览器条件——否则光标颜色不会变，不是你代码错了，是它根本没生效。
哪些元素上 caret-color 真的起作用
只对真正可编辑、有文本插入能力的元素有效：input[type="text"]、input[type="search"]、input[type="url"]、input[type="tel"]、textarea，以及 div[contenteditable="true"]。
以下情况完全无效：
-
input[type="checkbox"]、input[type="radio"]、input[type="number"]（即使能输入数字，也不触发文本插入模式） -
div没加contenteditable="true"属性 - 富文本编辑器里套了多层 wrapper，你给外层 div 设了
caret-color，但真实编辑区域是内层div[contenteditable]或textarea
调试建议：用 DevTools 点击元素，看焦点是否落在你设样式的那个节点上；如果不是，就去定位真实编辑容器。
立即学习“前端免费学习笔记（深入）”；
为什么写了 caret-color 却没变化
最常见原因不是属性不支持，而是样式被覆盖或条件不满足：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 被更高优先级规则重置，比如某处写了
input { caret-color: auto !important; }，或 UI 框架（如 Normalize.css）全局设了caret-color: auto - 父级设置了
color: transparent，子元素又没显式声明caret-color，导致光标继承为透明（看不见 ≠ 未生效） - 移动端 iOS Safari 在
font-size < 16px时会强制放大并忽略caret-color，哪怕计算值是1rem，只要最终渲染小于 16px 就可能失效 - Chrome 115+ 启用了系统级“强制颜色滤镜”时，
caret-color可能被浏览器直接忽略
验证是否生效：临时把值设成 red 或 #ff00ff，再检查 Computed 面板里 caret-color 的最终值是不是你预期的。
怎么安全地兼容旧浏览器和特殊场景
IE 完全不支持，Safari ≤11.0 也不支持；旧版 Safari（如 iOS 10）和 Electron 旧内核可能部分失效。不能只靠 @supports (caret-color: auto) 做渐进增强，因为有些环境连检测都失败。
更稳妥的做法：
- 对所有目标元素统一设基础色：
input, textarea { caret-color: #007bff; } - 加前缀兜底（无害）：
-webkit-caret-color: #007bff;（Safari ≤14.1 需要，新版自动忽略） - 深色模式下别硬写死颜色，配合媒体查询：
@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } } - 密码输入框在 Safari 15–16.3 有闪烁 bug，可加
transform: translateZ(0)强制重绘
注意：caret-color: transparent 在 Safari 15.3 及更早版本完全无效，且无法降级——此时只能用 JS 模拟遮盖，但 iOS 上 selection API 不稳定，慎用。
和 color、outline 配合时的关键细节
caret-color 和 color 不冲突，但行为容易误解：
-
color控制文字颜色，caret-color控制光标颜色，两者独立 - 没设
caret-color时，光标默认取color的深色变体（比如color: white→ 光标常为白色；color: #333→ 光标常为黑色），但深色背景上若只设color: white而不设caret-color，光标可能因对比度低而难以察觉 - 移除了
outline却没补其他焦点反馈，用户根本看不出输入框已聚焦——光标颜色变化不能替代可访问性焦点指示
真正容易被忽略的是：当 appearance: none 或自定义 border/shadow 改变了盒模型时，光标位置看起来“偏了”，这不是 caret-color 的问题，而是整体布局需要微调。
