caret-color 不生效主因是表单默认样式覆盖，需同时设置 color 和 background-color 保证对比度；safari 不支持 input[type="number"] 等类型；该属性不继承，须显式声明于可编辑元素。
Chrome/Firefox/Edge 中 caret-color 不生效？检查是否被表单重置样式覆盖
很多开发者写完 caret-color: #007bff; 发现只在部分浏览器有效，甚至完全没反应——大概率是浏览器默认表单样式（尤其是 input 和 textarea）的 color 或 background 间接压制了光标颜色。光标颜色不是独立渲染层，它依赖于文本前景色的可读性判断：当 color 为透明、或 background 与 caret-color 对比度过低时，浏览器可能自动回退到系统默认色（通常是黑色或白色）。
实操建议：
- 务必同时设置
color（文本色）和background-color，确保对比度足够；例如color: #333; background-color: #fff; - 避免对
input使用color: transparent;—— 这会让caret-color失效，哪怕显式声明了 - 在 Chrome 115+ 和 Edge 115+ 中，若启用了「强制深色模式」（
@media (prefers-color-scheme: dark)下未适配），caret-color可能被忽略，需单独覆盖
Safari 15.4+ 支持 caret-color，但不支持 input[type="number"]
Safari 是最后一个支持该属性的主流浏览器，但它对表单控件类型做了严格限制：原生 input[type="number"]、input[type="date"]、input[type="time"] 等完全忽略 caret-color，哪怕加了 !important 也没用。这是 WebKit 的已知限制，并非 CSS 写法问题。
实操建议：
- 如需统一光标色，把
type="number"改为type="text"并配合inputmode="numeric"和 JS 校验（更可控） - 不要试图用
::-webkit-inner-spin-button伪元素 hack 来“修复”数字输入框的光标——它不影响光标本身 - 可通过
@supports (caret-color: auto)安全地做渐进增强，但注意 Safari 15.4 前版本不支持该@supports查询
使用 caret-color 时，outline 和 focus-visible 的交互容易被忽略
光标颜色只在元素获得焦点且可编辑时显示，但实际项目中，outline 样式常被设为 none 或缩进，导致用户无法感知当前聚焦状态；而 :focus-visible 的触发逻辑又和鼠标/键盘操作路径强相关——这会让 caret-color 的视觉意义大打折扣。
实操建议：
- 别直接
outline: none，改用outline: 2px solid transparent;+outline-offset: 2px;保无障碍兼容 - 如果用了
focus-visiblepolyfill（如focus-visiblenpm 包），确认它没意外移除caret-color所需的focus状态 - 移动端 iOS Safari 在软键盘弹出后有时会重置光标颜色，可在
focus事件中用el.style.caretColor = '...';强制重设一次（小概率需）
全局统一光标色？慎用 *::selection 或通配符重置
有人想“一劳永逸”，在根节点写 :root { caret-color: var(--primary); } 再让所有 input 继承——但 caret-color **不继承**，必须显式设置到可编辑元素上。更危险的是，用 * { caret-color: ... } 会影响所有元素（包括 div[contenteditable]、span 等），而这些元素未必有预期的文本色背景，反而引发对比度失败或 WCAG 问题。
实操建议：
- 只针对明确需要控制的元素设置：例如
input, textarea, [contenteditable] - 避免和
::selection颜色冲突——两者共用同一色值时，在高亮选中文本状态下光标可能消失（因背景盖住了光标） - 设计系统中若定义了
--form-caret-color，请同步检查其在深色主题下的color和background-color是否仍满足 AA 级对比度
真正麻烦的从来不是写一行 caret-color，而是它依赖的上下文太具体：文本色、背景、输入类型、焦点管理、甚至系统配色方案。漏掉其中任一环，光标就悄悄变回浏览器出厂设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
