input光标颜色必须用caret-color属性设置，仅对可编辑元素（如input、textarea、contenteditable）生效，不继承、不响应currentColor动态变化，IE完全不支持，iOS 15.4前Safari兼容性差。
input 光标颜色由 caret-color 控制
HTML 输入框的光标（插入符）颜色不能通过 color 或 border 等常规属性修改，必须使用 CSS 的 caret-color 属性。它直接作用于可编辑元素（如 <input>、<textarea></textarea>、contenteditable 容器），且优先级高，会覆盖系统默认或浏览器主题色。
常见错误是试图用 input::placeholder 或 input:focus 里改 color，这完全无效——color 只影响文本，不影响光标。
-
caret-color支持所有标准颜色值：caret-color: #007bff、caret-color: currentColor、caret-color: transparent（隐藏光标） - 在深色背景输入框中，若不显式设置，部分浏览器（如旧版 Safari）可能仍用黑色光标，导致不可见
- 需注意：IE 完全不支持，Edge 17+、Chrome 57+、Firefox 68+、Safari 11.1+ 支持
如何为 input 设置 caret-color
直接在 input 的 CSS 规则中声明即可，无需伪元素或 JS 干预。最简写法如下：
input {
caret-color: #ff6b6b;
}
如果只希望聚焦时才变色，可以结合 :focus：
input {
caret-color: #95a5a6; /* 默认浅灰 */
}
input:focus {
caret-color: #2ecc71; /* 聚焦时绿色 */
}
- 该属性对
type="password"同样生效，但部分浏览器（如 Safari）在密码框中会强制使用系统光标色，表现可能不一致 - 不要和
text-shadow混用——光标不受text-shadow影响，加了也没用 - 若使用 CSS-in-JS 或 scoped style（如 Vue 单文件组件），确保选择器能命中目标
input，避免样式被隔离或覆盖
移动端 iOS Safari 的兼容性陷阱
iOS 15.4 之前，Safari 对 caret-color 支持极差：即使写了，也常忽略或仅在部分输入类型下生效。iOS 15.4+ 才基本稳定支持，但仍建议做降级处理。
- 可配合
@supports (caret-color: auto)做特性检测，避免干扰老版本样式 - 真机测试必做：模拟器有时显示正常，但实际 iPhone 上可能回退到系统蓝光标
- 若业务强依赖光标可见性（如金融类表单），可考虑用
input[type="text"]替代type="search"或自定义contenteditable区域——后者对caret-color支持更可靠
为什么 cursor: url() 不是解决方案
有人尝试用 cursor: url(...), auto 自定义鼠标指针图标，但这改的是「鼠标形状」，不是「文本光标」（即闪烁的竖线）。两者完全无关，混淆会导致调试走偏。
-
cursor控制鼠标悬停/点击时的图标（如手型、箭头） -
caret-color控制键盘输入时的文本插入位置指示器 - 在
input上同时设两者不会冲突，但目的和效果毫无交集
实际项目中最容易漏掉的是 iOS 旧版本兼容验证，以及误以为 color 能控制光标。只要记住：光标颜色 = caret-color，且必须真机测 iOS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
