caret-color 有效需满足浏览器支持、正确选择器、足够对比度等条件；Safari 11及更早、IE、Android 4.4 WebView 不支持；input[type="number"]等原生控件在WebKit/Chromium中禁用该属性；contenteditable上支持极差，建议JS模拟。
直接用 caret-color 就行，但必须写对位置、配好颜色对比度，且得知道它在哪会失效。
为什么 caret-color 写了却没变色
最常见原因是浏览器根本不认这个属性，或者样式被覆盖。Safari 11.0 及更早、所有 IE、Android 4.4 WebView 完全不支持，caret-color 会被静默忽略——连 warning 都没有。
另一个高频问题是 CSS 优先级冲突：某些 UI 框架（比如 Ant Design）在 :focus 状态下重置了光标色，或用 !important 锁死了默认值。
- 检查浏览器 DevTools 的 Computed 标签页，确认
caret-color是否出现在最终生效样式中 - 避免写成
input:focus { caret-color: red !important }——!important容易被更高权重要素覆盖，改用更具体的选择器，比如.form-input:focus - 别依赖继承：
caret-color不继承，父元素设了color或caret-color，子input也不会自动获得
caret-color 对 input[type="number"] 无效怎么办
Safari 和部分旧版 Chrome 对 input[type="number"]、type="date"、type="time" 等原生控件完全禁用 caret-color，这是 WebKit 和 Chromium 的已知限制，不是你 CSS 写错了。
- 把
type="number"改成type="text"，再加inputmode="numeric"和 JS 校验（更可控，也绕过光标限制） - 不要试图用
::-webkit-inner-spin-button去 hack 数字输入框——它只控制上下箭头，不影响光标渲染 - 如果必须保留原生类型，那就接受它无法定制光标色的事实，转而强化
outline或box-shadow来提供焦点反馈
移动端和深色模式下光标颜色异常
iOS Safari 在软键盘弹出后可能强制重置光标色；Chrome/Edge 启用「强制深色模式」时，caret-color 也可能被忽略，尤其当 @media (prefers-color-scheme: dark) 下没做适配。
- 务必同时设置
color和background-color，确保文本与背景有足够对比度——光标颜色依赖可读性判断，color: transparent会让caret-color失效 - macOS 上 Safari 有时会把浅色光标（如
#ffffff）自动转为深灰，这不是 bug，是系统级可访问性干预 - Electron 应用若基于旧 Chromium（如 9x 或更早），即使版本号显示 ≥57，也可能因 blink 渲染器被禁用导致
caret-color完全不生效
contenteditable 元素怎么设光标色
caret-color 在 contenteditable 上支持极不稳定：Firefox 一直不支持，Safari 直到 15.4 才开始有限支持，且仅限部分场景。
- 放弃
caret-color，改用 JS 监听focusin事件，在光标位置插入一个绝对定位的span，配合getSelection()+getRangeAt(0)动态控制其位置和颜色 - 如果只是单行文本，可用
color: transparent+::selection+ 背景色模拟高亮效果，但本质不是光标，只是视觉近似 - 别用
::before/::after伪元素模拟光标——它们不能随光标实时移动，也不响应 blink 动画
真正难的不是写对那行 caret-color，而是判断什么时候它根本不能用，以及用户在什么设备、什么系统设置下根本看不到你设的颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
