caret-color 属性不支持所有浏览器，ie 完全不支持，safari 11.0 及更早版本也不支持；chrome 57+、firefox 53+、safari 11.1+、edge 79+ 原生支持。
caret-color 属性是否支持所有浏览器
不支持 IE 和旧版 Safari（caret-color 不能单独依赖。
实际项目中建议用 @supports 做渐进增强：
input {
color: #333;
}
@supports (caret-color: auto) {
input {
caret-color: #ff6b6b;
}
}
caret-color 与 input 的 color 属性冲突吗
不冲突，但有优先级关系：caret-color 明确指定时会覆盖默认光标颜色（即跟随 color 的行为）。若未设置 caret-color，光标默认取 color 值的深色变体（如 color: white 时，光标通常也是白色）。
常见误操作是只改了 color 却没设 caret-color，结果在深色背景上光标看不见——因为光标跟着变成了深色。
- 想让光标始终高对比：显式设置
caret-color: #fff或caret-color: #000 - 想随文字变色但保持可见：用
caret-color: currentColor（注意部分老浏览器不支持该值） - 禁用自定义光标（回退到系统默认）：设为
caret-color: auto
textarea 和 contenteditable 元素能用 caret-color 吗
可以，caret-color 对 <textarea></textarea>、contenteditable="true" 的元素都生效，且写法完全一致。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
但要注意：某些富文本编辑器（如 Quill、Tiptap）会包裹多层 DOM，直接给外层容器设 caret-color 可能无效，需定位到实际编辑区域（通常是 div[contenteditable] 或 textarea 本身）。
示例：
textarea,
.editor-content[contenteditable] {
caret-color: #4a90e2;
}
为什么设置了 caret-color 还是没变化
最常见原因是被更高优先级的样式覆盖，或父级设置了 color 但子元素（如 input::placeholder）干扰了继承链。
- 检查是否被
!important或内联样式覆盖（用浏览器 DevTools 的 Computed 面板看最终生效值） - 确认选择器命中的是可编辑元素本身，不是其父容器（
caret-color不会继承） - 某些 CSS 重置库（如 Normalize.css）可能重设了
input的color，间接影响默认光标色；此时更需显式声明caret-color - Chrome 115+ 在启用“强制颜色滤镜”系统设置时，
caret-color可能被忽略
光标颜色是个容易被忽略的细节，但它直接影响表单可访问性——尤其在深色模式或高对比度场景下，一个看不见的光标会让用户根本无法输入。别等 QA 提 bug 才想起来查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
