caret-color 在 <input type="text/password/search">、<textarea> 和 contenteditable 元素上生效，不支持 number、checkbox 等非文本输入；需显式设置在可编辑节点或其直接父级（编辑宿主），且避免被覆盖或使用不支持值。
caret-color 在哪些输入元素上生效？
caret-color 只对可编辑的文本内容起作用，不是所有 <input> 都支持。它在 <input type="text">、<input type="password">、<input type="search"> 和 <textarea> 上有效，但对 <input type="number">、<input type="checkbox"> 等非文本输入无效。
另外，它也适用于 contenteditable 元素，比如 <div contenteditable>。如果设在父容器上，不会自动继承到子级可编辑区域——必须显式设置在可编辑节点本身或其直接父级（当该父级是编辑宿主时）。
怎么写才不会被浏览器忽略？
最常见失效原因是用了不支持的值或被其他样式覆盖。记住三点：
-
caret-color: transparent合法，但会让光标“消失”，慎用；caret-color: auto会回退到系统默认色（通常为黑色或白色），不是重置为继承值 - 不要和
color混淆：color控制文字颜色，caret-color单独控制光标，二者互不影响 - 某些旧版 Safari（≤15.4）和部分 Android WebView 对
caret-color支持不稳定，若需兼容，建议加-webkit-text-fill-color或降级方案（如用伪元素模拟光标）
和 focus 状态联动时要注意什么？
很多人想“获得焦点时光标变蓝，失焦时变灰”，直接写 :focus { caret-color: blue; } 是可行的，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 必须确保该状态选择器优先级足够高，否则可能被更早声明的全局
caret-color覆盖 - 不要写成
input:focus::placeholder { caret-color: ... }——::placeholder伪元素里设caret-color无效 - 如果同时设置了
outline: none，请确认用户仍能感知焦点状态，因为光标颜色变化不足以替代视觉焦点提示
移动端键盘弹出后光标颜色异常怎么办？
iOS Safari 和部分安卓浏览器在软键盘唤起后，有时会强制重置光标为系统主题色（尤其深色模式下），导致 CSS 设置失效。这不是 bug，而是系统级干预：
- 目前无标准 API 可绕过该行为，
caret-color在键盘活跃期间可能被忽略 - 可尝试在
focus事件中用 JS 强制重设：input.addEventListener('focus', () => { input.style.caretColor = '#3b82f6'; }); - 但注意，频繁操作 style 可能触发重排，且部分 WebView 对内联 style 的响应也不稳定
真正可靠的方案其实是接受这个限制——把 caret-color 当作增强体验而非核心功能，重点保证文字对比度和焦点可见性。
