iOS Safari 15.4前不支持caret-color，真机测试更可靠；Android厂商定制系统可能强制覆盖；type="number"等控件禁用该属性；深色模式需媒体查询适配；光标颜色非焦点反馈全部，应优先保障:focus-visible可用性。
caret-color在iOS Safari中不生效的典型原因
iOS Safari直到15.4才原生支持cacet-color，15.3及更早版本完全忽略该属性——写了等于没写，DevTools里连computed样式都不会出现。真机测试比模拟器更可靠，尤其软键盘弹出后，Safari常强制重置光标为系统默认色（深蓝或黑），此时即使CSS生效也会被覆盖。
常见误判点：@supports (caret-color: auto)在Safari 15.4之前根本不识别这个查询，用它做检测会误认为支持，结果线上失效。验证是否生效最直接的方式是：真机打开页面 → 点击输入框获得焦点 → 打开DevTools → 选中<input>元素 → 切到Computed面板搜索cacet-color，看值是否为你设定的颜色。
- 别用
currentColor或HSLA值，旧版Safari可能fallback为黑色 - 避免
color: transparent，这会让光标“消失”，不是不生效，而是不可见 - 确保选择器直接作用于
<input>或<textarea>，而非父容器（框架scoped style或shadow DOM容易导致规则落空）
Android端光标颜色异常的处理策略
Chrome for Android和Firefox for Android基本都支持cacet-color，但三星One UI、MIUI等厂商定制系统会强制将光标同步为系统高亮色，CSS设置被静默覆盖，且无任何报错或警告。这不是bug，是系统级干预，无法通过代码绕过。
应对思路不是硬刚，而是降低预期：用中等饱和度的主色（如#4a6fa5）替代纯白或荧光色，提高被系统保留的概率；同时强化其他焦点反馈，比如加粗边框、添加阴影或浮动标签动画，让用户明确知道当前聚焦位置。
立即学习“前端免费学习笔记（深入）”；
- 不要尝试用
line-height或padding调整光标高度——它不受这些属性影响 - Android光标是直角矩形，iOS带圆角+阴影，视觉差异属正常平台行为，无需对齐
- 部分低端安卓WebView（如Android 4.4内置浏览器）完全不支持
cacet-color，静默忽略
input[type="number"]等控件光标不可定制的现实解法
input[type="number"]、input[type="date"]、input[type="time"]在WebKit和Chromium内核中被硬编码禁用cacet-color，加!important或伪元素hack都无效。这不是兼容性问题，是浏览器设计限制。
可行方案是类型降级：改用type="text" + inputmode="numeric"（Android/iOS软键盘仍显示数字键盘），再配合JS校验格式和范围。这样既能控制光标色，又保持输入体验接近原生数字控件。
- 别碰
::-webkit-inner-spin-button，它只控制上下箭头，不影响光标 - 若必须用
type="number"，接受其光标不可定制的事实，转而优化:focus状态的outline或box-shadow - 注意
inputmode在旧版iOS Safari中支持有限，需搭配pattern="[0-9]*"兜底
深色模式与强制颜色滤镜下的光标失效
Chrome 115+和Edge 115+启用「强制深色模式」时，cacet-color可能被浏览器直接忽略；macOS Safari在深色背景下设#ffffff光标，有时会自动转为灰黑色——这是系统可访问性干预，非代码错误。
关键做法是适配媒体查询，而不是写死颜色：@media (prefers-color-scheme: dark) { input:focus { caret-color: #4ecdc4; } }。同时必须显式设置color和background-color，保证文本与背景对比度足够——光标颜色依赖可读性判断，color: transparent会导致cacet-color失效。
- Electron应用若基于Chromium 9x或更早版本，即使版本号≥57，也可能因blink渲染器被禁用而完全不生效
-
cacet-color不继承，父元素设了color或cacet-color，子input不会自动获得 - 某些UI框架（如Ant Design）全局重置
cacet-color: auto，需用更具体的选择器覆盖
cacet-color不可靠时，优先保障:focus-visible的无障碍可用性，而不是执着于一个像素级的竖条颜色。 
