caret-color仅对可编辑文本元素生效，如text/password/search输入框、textarea和contenteditable=true的元素；对只读、禁用、非文本控件及普通静态元素无效。
直接用 caret-color 就能改表单输入框里的光标颜色，但不是所有浏览器都支持，而且它只作用于可编辑元素（比如 <input>、<textarea>、contenteditable 元素），对只读或禁用状态无效。
哪些元素能用 caret-color？
只有用户能实际输入内容的元素才响应这个属性。常见有效场景：
-
<input type="text">、<input type="password">、<input type="search">等文本类输入框 <textarea><div contenteditable="true">
以下情况完全不生效：
-
input[readonly]或input[disabled] -
<input type="checkbox">、<input type="radio">、<select>这类非文本输入控件 - 普通
<p>或<span>（即使加了contenteditable也得显式设为true）
caret-color 的兼容性与降级处理
Chrome 57+、Firefox 53+、Safari 11.1+ 支持，但 Edge 16–18 不支持（Edge 79+ 基于 Chromium 就没问题）。iOS Safari 11.3+ 才开始支持，旧版 iOS 很可能看不到效果。
立即学习“前端免费学习笔记（深入）”；
如果需要兼容老环境，目前没有纯 CSS 降级方案 —— 浏览器不识别该属性就直接忽略，不会报错，也不会 fallback 到系统默认色。所以：
- 别指望用
color或outline模拟光标，它们控制的是文字或边框，不是插入符本身 - 真要强兼容，只能用 JS 动态插入伪光标（复杂且有焦点/同步问题），一般不推荐
- 日常项目中，明确标注“仅现代浏览器支持”即可，不必为 iOS 10 或旧安卓 WebView 过度妥协
写法细节和容易踩的坑
caret-color 接受任意合法 CSS 颜色值，但要注意几个实际限制：
- 不能用
transparent完全隐藏光标（部分浏览器会退回到黑色，不是真透明） - 设为
inherit时，会继承父元素的color，不是caret-color；若父元素没设，最终取初始值auto（即系统主题色） - 在深色背景上设浅色光标很直观，但在浅色背景上设白色光标可能看不见 —— 建议搭配
background-color和color一起检查对比度 - 不要写成
cursor-color（这是常见拼写错误，CSS 中没有这个属性）
示例：
input:focus, textarea:focus {
caret-color: #ff6b6b;
}
和 input::selection 混用时的注意点
caret-color 和 ::selection 无关，但两者常被一起设置来统一视觉。需注意：
-
::selection控制的是选中文本的高亮色，不影响光标 - 如果
::selection背景色太亮（比如白色），而光标又是浅色，选中状态下可能看不清光标位置 - 某些浏览器（如旧版 Safari）对
::selection和caret-color的渲染顺序有细微差异，建议在真实设备上快速验证焦点+选中组合态
真正难调的不是怎么写，而是光标颜色在不同系统主题（尤其是 macOS 暗色模式 + Safari）、不同缩放比例、不同输入法激活状态下是否依然清晰可辨 —— 这些没法靠 CSS 自动适配，得手动测。
