caret-color仅对可编辑文本元素生效：input[type="text/search/password/url/tel"]、textarea及contenteditable="true"元素；对button、hidden、disabled、number、checkbox等无效，且不继承、需显式设置。
caret-color 在哪些输入元素上生效
这个属性只对可编辑的表单控件起作用，比如 <input type="text">、<textarea></textarea> 和设置了 contenteditable="true" 的元素。它对 <input type="button">、<input type="hidden"> 或只读（readonly）但未禁用（disabled）的输入框无效——注意：只读 ≠ 不可编辑，但 caret-color 仍会生效；真正失效的是 disabled 状态。
-
disabled元素完全忽略caret-color，无论 CSS 如何设置 -
contenteditable元素需确保有焦点且处于编辑态，否则光标不显示，颜色自然不可见 - 在
<input type="password">上有效，但部分旧版 Safari 可能渲染异常
如何正确设置 caret-color 值
它接受所有标准 CSS 颜色值，包括关键字（如 red）、十六进制（#ff0033）、RGB（rgb(255, 0, 51)）、HSL（hsl(348, 100%, 60%)）和 transparent。不支持渐变或自定义函数。
- 使用
transparent可隐藏光标（但别误以为是“禁用输入”，用户仍可输入） - 避免设为与背景色相同（如白色背景配
white），会导致光标不可见且难以调试 - 不支持
currentcolor在部分 Chromium 115 之前版本中存在兼容性问题，建议显式写死颜色
示例：
input:focus { caret-color: #2563eb; }
textarea { caret-color: hsl(200, 100%, 40%); }
浏览器兼容性与降级处理
caret-color 在 Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 中原生支持。IE 完全不支持，且无等效替代属性。
- 不要依赖 JavaScript 模拟光标颜色（无法精确同步原生光标位置与闪烁节奏）
- 若需兼容 Safari 10 或更早版本，只能放弃定制，或用伪元素 + 绝对定位模拟光标（仅适用于简单场景，且无法匹配原生行为）
- 可通过
@supports (caret-color: auto)进行特性检测，避免影响旧环境样式层叠
与其他光标相关样式的冲突
caret-color 仅控制光标“竖线”的颜色，不影响其宽度（由字体和行高隐式决定）或闪烁行为。它和以下属性无关：
-
cursor属性控制鼠标指针形状，与文本输入光标无关 -
text-decoration-color影响下划线/删除线颜色，不干扰光标 -
outline或border是焦点框，不是光标本身
常见误操作：给 input 设置 color 后误以为光标也会变色——不会。光标颜色必须显式声明 caret-color，哪怕值和 color 相同。
真正容易被忽略的是：移动端 iOS Safari 对 caret-color 的支持从 iOS 12.2 开始才稳定，早期版本即使声明了也可能回退到系统默认色，且无法通过 JS 检测该回退行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
