caret-color: transparent 在 Firefox 104+、Chrome 105+、Safari 15.4+、Edge 105+ 中对 contenteditable 元素有效，但 Safari 15.3 及更早、所有 IE 完全不支持；失效常见原因包括未获焦点、样式被覆盖、只读状态或 Electron 禁用 blink 渲染器。
caret-color: transparent 对 contenteditable 元素是否有效
在绝大多数现代浏览器中，caret-color: transparent 对 contenteditable 元素是有效的——但仅限于明确支持该属性的版本：Firefox 104+、Chrome 105+、Safari 15.4+、Edge 105+。老版本 Safari（如 15.3 及更早）和所有 IE 完全忽略该声明，且不会报错或降级，光标保持默认色。
为什么写了 caret-color: transparent 却还看得见光标
常见原因不是语法错误，而是作用对象或状态不匹配：
-
contenteditable元素本身未获得焦点（比如被pointer-events: none阻断，或父层opacity: 0导致渲染异常） - 样式被更高优先级规则覆盖，例如某处写了
[contenteditable] { caret-color: auto !important; } - 元素处于只读状态：
contenteditable="false"或contenteditable="plaintext-only"时，光标行为不可控 - 某些 Electron 应用（尤其基于 Chromium 90–104 的旧版）禁用了 blink 渲染器，
caret-color整体失效
隐藏光标时必须同步处理 ::selection 和 focus 样式
单设 caret-color: transparent 只让光标“不可见”，但用户仍可选中文本，此时 ::selection 背景可能暴露编辑意图。为视觉一致性，建议配套处理：
- 显式清除焦点轮廓：
[contenteditable]:focus { outline: none; } - 隐藏选中文本高亮（若需彻底“禁用编辑感”）：
[contenteditable]::selection { background: transparent; color: inherit; } - 避免文字颜色干扰：若父级设了
color: transparent，务必单独给caret-color赋值，否则光标会因继承而透明——这不是 bug，是预期行为
兼容性 fallback 必须用 JS 动态控制
对 Safari caret-color 完全无效，此时无法靠 CSS 隐藏光标。可行方案只有 JavaScript 模拟：
立即学习“前端免费学习笔记（深入）”；
- 监听
focusin事件，在光标位置插入一个position: absolute的<span></span>，并设置visibility: hidden - 用
getSelection().getRangeAt(0)获取光标位置，再通过range.getBoundingClientRect()定位伪光标 - 注意：该方案无法阻止系统原生光标闪烁，只能叠加遮盖；且在 iOS Safari 上因 selection API 限制，效果不稳定
真正容易被忽略的是：macOS Safari 有时会强制将浅色光标转为深色以保证可读性，即使你写了 caret-color: transparent，也可能看到一个半透明灰光标——这不是失效，是系统级干预，无 CSS 方案可绕过。
