caret-color 在 iOS Safari ≤15.3、Samsung One UI 4.x–5.x、Android 4.4–6.0 WebView 等环境完全无效，属性被忽略；WebKit/Chromium 对特定 input type 硬编码禁用，且受系统可读性策略影响，真机测试不可替代。
直接说结论：caret-color 在 iOS Safari（尤其是 15.3 及更早）、部分 Samsung One UI、旧版 Android WebView 上根本不会生效，不是写法问题，是浏览器底层不支持或强制覆盖。别指望它在所有移动端设备上一致工作。
哪些移动端环境 caret-color 完全无效
这些情况不是“偶尔失效”，而是属性压根被忽略，DevTools 的 Computed 面板里都找不到 caret-color 这一项：
- iOS Safari ≤15.3（截至 2026 年 8 月，仍有约 7% 设备停留在此区间）
- Safari 15.4–16.3 对
input[type="password"]有闪退/瞬时变色 bug，光标聚焦后很快回退为黑色 - Samsung One UI 4.x–5.x 系统会强制将光标设为系统紫蓝色，
caret-color值被静默丢弃 - Android 4.4–6.0 WebView（仍存在于部分银行/政务类 App 内置浏览器）
验证方式：真机打开 DevTools（Safari Web Inspector 或 Chrome Remote Debugging），选中输入框 → Computed → 搜索 caret-color，若无结果，说明该环境不支持。
写了 caret-color 却没变化的真因（非兼容性问题）
即使浏览器支持，也常因以下原因导致“看起来没变”：
立即学习“前端免费学习笔记（深入）”；
-
input[type="number"]、input[type="date"]、input[type="time"]在 WebKit/Chromium 中被硬编码禁用caret-color，加!important也没用；改用type="text" inputmode="numeric" - 父级设置了
color: transparent，而caret-color不继承，子元素又没显式声明，结果光标透明不可见 - 某些 reset.css（如 Normalize.css）全局设了
caret-color: auto，把你自定义的值覆盖了 - iOS Safari 在
font-size渲染值小于16px时会强制放大字体并忽略caret-color - 软键盘弹出后，Safari 有时重置光标为系统色；可加
transform: translateZ(0)强制重绘
安全写法与降级策略
不要依赖 @supports (caret-color: auto) 做检测——Safari 15.4 前连这个查询都不识别，会误判为支持。
- 统一基础写法：
input, textarea { caret-color: #007bff; -webkit-caret-color: #007bff; }（-webkit-caret-color对新版浏览器无害，仅 Safari ≤14.1 需要） - 深色模式适配：
@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } } - 密码框单独处理（防 Safari 15–16.3 bug）：
input[type="password"]:focus { caret-color: #4ecdc4; transform: translateZ(0); } - 对完全不支持的环境（如 IE、老安卓 WebView），放弃
caret-color，改用视觉降级：确保color和背景对比度足够，让用户能看清光标位置即可
最易被忽略的一点：移动端光标颜色和系统可读性策略强绑定。比如 macOS/Safari 会把 #ffffff 强制渲染为灰白，iOS 在深色背景下可能把浅色光标提亮——你设的值 ≠ 最终渲染值，真机测试不可替代。
