caret-color 在现代主流浏览器（chrome 57+、firefox 53+、safari 11.1+、edge 79+）中已全面支持，但 ie 完全不支持，旧版 android webview（4.4–6.0）也无效；它仅对可编辑元素生效，不继承，不支持渐变或 currentcolor，且受 filter/clip-path 等属性影响。
caret-color 设置光标颜色的浏览器兼容性现状
目前 caret-color 在所有现代主流浏览器中均已支持（Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+），但 IE 完全不支持，且部分旧版 Android WebView（如 Android 4.4–6.0）也无效。如果你的项目需兼容 IE 或老安卓 WebView，不能依赖它实现光标变色，得用其他方案（比如隐藏原生输入框 + 自绘光标）。
caret-color 的基本写法和生效条件
它只对可编辑元素生效，包括 <input>（type="text"、"search"、"password" 等）、<textarea></textarea> 和 contenteditable 元素。设置方式就是标准 CSS 属性：
input, textarea {
caret-color: #ff6b6b;
}
- 值可以是任意合法颜色：十六进制（
#333）、RGB（rgb(51, 51, 51)）、关键字（red）、transparent（隐藏光标） - 不支持渐变、图片或
currentcolor（除非你明确设了color，否则currentcolor会退为浏览器默认） - 它不会继承，必须显式写在目标元素或其伪类上（比如
input:focus）
与 input[type="password"] 配合时的常见表现异常
在密码输入框里设 caret-color，多数浏览器（Chrome/Firefox）能正常显示彩色光标；但 Safari 15–16.3 存在 bug：光标颜色仅在聚焦瞬间闪现，随后恢复为黑色。这不是写法问题，而是渲染层未正确更新。临时缓解办法是加一句强制重绘：
input[type="password"]:focus {
caret-color: #4ecdc4;
outline: none;
transform: translateZ(0); /* 触发硬件加速，促发重绘 */
}
- 避免用
!important强行覆盖，可能被 UA 样式压制 - 不要和
::-webkit-input-placeholder的颜色冲突——placeholder 文字颜色不影响光标，但视觉上容易误判效果是否生效 - 移动端 iOS Safari 对
caret-color响应略慢，建议搭配transition: caret-color 0.1s让变化更平滑（注意：该 transition 实际仅在 Chrome 中有效）
用 JavaScript 动态切换 caret-color 的注意事项
可以通过 element.style.caretColor = "blue" 或 getComputedStyle(el).caretColor 读写，但有两点关键限制：
-
getComputedStyle返回的是解析后的 RGB 值（如"rgb(255, 107, 107)"），不是原始声明值，别拿它做字符串比对 - 在
input的focus事件回调里设置，需确保 DOM 已完成聚焦流程（某些情况下需setTimeout(..., 0)延迟一帧） - 若元素被
display: none或visibility: hidden遮盖，caret-color设置仍生效，但不可见——这常被误认为“没起作用”
真正容易被忽略的是：当父容器设置了 filter（如 grayscale(1)）或 clip-path，部分浏览器（尤其是 Safari）会完全禁用 caret-color 渲染，光标退回系统默认色。这种场景下，只能移除滤镜或改用定位遮罩模拟效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
