caret-color 在 、 和 contenteditable 元素上生效，不支持 number、checkbox 等非文本输入；需显式设置在可编辑节点或其直接父级（编辑宿主），且避免被覆盖或使用不支持值。

caret-color 在哪些输入元素上生效？

caret-color 只对可编辑的文本内容起作用，不是所有 <input> 都支持。它在 <input type="text">、<input type="password">、<input type="search"> 和 <textarea></textarea> 上有效，但对 <input type="number">、<input type="checkbox"> 等非文本输入无效。

另外，它也适用于 contenteditable 元素，比如 <div contenteditable>。如果设在父容器上，不会自动继承到子级可编辑区域——必须显式设置在可编辑节点本身或其直接父级（当该父级是编辑宿主时）。 <h3>怎么写才不会被浏览器忽略？</h3> <p>最常见失效原因是用了不支持的值或被其他样式覆盖。记住三点：</p> <ul> <li> <code>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; } 是可行的，但要注意：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须确保该状态选择器优先级足够高，否则可能被更早声明的全局 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 当作增强体验而非核心功能，重点保证文字对比度和焦点可见性。