应使用 CSS 的 caret-color 属性设置协作光标颜色，需作用于 contenteditable 元素或表单控件，通过动态切换 class 或内联 style 绑定用户专属色，并注意焦点元素定位、样式优先级及浏览器兼容性。
HTML 中怎么给协作光标设置专属颜色
协作编辑场景下，每个用户需要一个稳定、可区分的光标颜色，但 HTML 本身没有 cursor-color 这类原生属性。真正生效的是 CSS 的 ::selection 和 caret-color，而后者才是控制输入光标（即文本插入点）颜色的唯一标准方式。
-
caret-color支持所有现代浏览器（Chrome 57+、Firefox 61+、Safari 11.1+），IE 不支持，Edge 17+ 支持 - 必须作用于可编辑元素（如
contenteditable="true"的<div>或<input>/<textarea>） - 不能通过 JavaScript 动态改写伪元素样式，所以“为不同用户切换光标色”得靠切换 class 或内联 style
为什么直接写 style="caret-color: #ff6b6b;" 有时没反应
常见原因是目标元素不可编辑或被更高优先级样式覆盖。比如在富文本编辑器中，光标实际落在嵌套的 <span> 或 <div> 内，而你只给外层容器设了 caret-color —— 它不会继承。
- 检查是否设置了
contenteditable="true"（或用了<input>等原生表单控件） - 用 DevTools 查看真实获得焦点的元素，对它直接加
caret-color - 避免和
outline、border等焦点样式冲突；某些 UI 框架（如 ProseMirror）会重置caret-color，需提高 CSS 选择器权重
多人协作时如何动态切换成员专属光标色
没有“自动绑定用户 ID 到光标色”的浏览器机制，必须由业务逻辑控制。核心是：谁当前在编辑，就把对应颜色应用到其正在操作的编辑节点上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
focusin事件，拿到触发元素，再根据用户身份设置element.style.caretColor = "#4ecdc4" - 若使用虚拟光标（如自绘光标 + position:absolute），
caret-color失效，此时颜色完全由 JS 控制 DOM 节点样式 - 注意清理：用户离开编辑状态时，应还原或移除
caret-color，否则可能影响后续用户 - 移动端 Safari 对
caret-color支持不稳定，部分版本下仅在<input>中可靠，contenteditable可能回退为系统默认色
和 ::selection 混用时的颜色冲突问题
::selection 控制选中文本背景/文字色，和 caret-color 无关，但视觉上容易误判。比如用户看到“选区是蓝色，光标却是灰色”，会以为光标色没生效 —— 其实只是两者独立控制。
立即学习“前端免费学习笔记（深入）”；
-
::selection不影响光标，caret-color也不影响选区 - 如果想让光标和选中高亮保持色调统一（例如都用成员主色），需分别设置：
caret-color: #ff6b6b和::selection { background-color: #ff6b6b20 } - 透明度要谨慎：
caret-color不支持 rgba() 的 alpha 通道（Safari 旧版会忽略整条声明），推荐用十六进制或 hsl()
真正难的不是设颜色，而是确保它始终贴在“当前正在打字的人”身上 —— 编辑器焦点管理、多光标并存、跨 iframe 协作，这些地方一松懈，颜色就错位。别指望一次 CSS 就搞定。
