caret-color 在 Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+ 中可用，IE 完全不支持；需对旧版 Safari 或 IE 提供 outline/border 等降级方案；直接通过 CSS 设置即可，如 input:focus { caret-color: #4ecdc4; }，不继承且不影响 color 属性。
caret-color 在哪些浏览器里能用
不是所有浏览器都支持 caret-color，Chrome 57+、Firefox 53+、Safari 11.1+ 和 Edge 79+ 才认这个 CSS 属性。IE 完全不支持，哪怕加前缀也没用。
如果你的项目还要兼容 IE 或老版本 Safari（比如 iOS 10），得准备降级方案——比如靠 input 聚焦时用 outline 或 border 模拟视觉反馈，但注意这改的不是光标本身，只是“看起来像有响应”。
怎么写才让 input 或 textarea 的光标变色
直接在对应元素上加 CSS 即可，不需要 JS 干预。
常见写法：
input, textarea {
caret-color: #ff6b6b;
}
也可以按状态控制，比如只在聚焦时生效：
input:focus, textarea:focus {
caret-color: #4ecdc4;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
caret-color只作用于可编辑文本内容的元素，对div[contenteditable]同样有效 - 它不继承，所以父元素设了
caret-color: red，子input不会自动变红 - 值支持所有标准颜色语法：
#fff、rgb(255, 0, 0)、var(--primary)都行 - 设成
transparent光标就看不见了，慎用——用户可能以为输入框坏了
和 input 的 color 属性冲突吗
不冲突，但容易误判效果。color 控制的是**输入文字的颜色**，caret-color 控制的是**闪烁光标的颜色**，两者独立。
典型误区是：把 input 文字设成白色、背景也白色，再设 caret-color: white，结果光标“消失”——其实是因为它和背景同色，不是属性失效。
调试建议：
- 先确保背景和文字有足够对比度
- 临时把
caret-color设成高亮色（如red）确认是否生效 - 如果仍不显示，检查是否被其他规则覆盖（比如某条更具体的 CSS 把它重置成了
auto）
移动端 iOS 上的特殊表现
iOS Safari 对 caret-color 支持虽已上线，但有个隐藏限制：当 input 或 textarea 的 font-size 小于 16px 时，系统会强制放大字体并忽略部分样式，包括 caret-color。
解决办法只有两个：
- 把
font-size设为16px或更大（哪怕用rem计算后实际显示小，也要保证计算值 ≥16px） - 放弃自定义光标色，改用其他方式引导用户注意焦点（比如加个底部高亮条）
这个限制不会报错，也不会警告，光标就默默回退到系统默认色——最容易被忽略的坑就在这儿。
