caret-color 仅对可编辑文本元素生效，如 text、search、url、tel 类型的 input 和 textarea，以及 contenteditable 元素；checkbox、radio、button 等无效。
caret-color 在哪些表单元素上真正生效
只对可编辑、有文本输入能力的元素起作用，不是所有 <input> 都支持。比如 type="text"、type="search"、type="url"、type="tel"、textarea 可以；type="checkbox"、type="radio"、type="button" 完全无效。
注意：contenteditable 元素也支持，比如 <div contenteditable>，但需确保它处于可编辑状态（不是只读）。
- 浏览器默认会继承父级文本颜色，所以没显式设
caret-color时，光标常和color一致 -
input[type="password"]虽然内容被掩码，但焦点时光标仍可见，caret-color对它有效 - Firefox 61+、Chrome 57+、Safari 11.1+ 支持；IE 和旧版 Edge 不支持，别指望回退到伪元素模拟
为什么设了 caret-color 却没变色
常见原因是被更高优先级样式覆盖，或者元素本身不触发文本编辑模式。最典型的是：元素有 outline: none 但没配 caret-color，或用了 appearance: none 后丢失了原生编辑行为。
- 检查是否在
:focus里写错了选择器，比如写了input:focus { caret-color: red; }却忘了该input实际是type="number"—— 它不支持 - 如果父容器设了
color: transparent，而你又没给caret-color显式赋值，光标就变成透明（看不见），不是“没生效” - 某些 CSS 重置库（如 normalize.css）会全局设置
caret-color: auto，覆盖你的自定义值，得提高优先级或加!important（不推荐，优先查来源）
和 input:focus 的 outline / border 配合使用时的注意事项
caret-color 和 outline 是两套独立机制，改光标颜色不会影响焦点框，但视觉上容易错觉“焦点没来”。尤其当 outline 被移除后，用户可能根本看不出输入框已获得焦点。
立即学习“前端免费学习笔记（深入）”；
- 别单独改
caret-color就完事，至少保留一点视觉反馈，比如加个细微的border-bottom: 2px solid #007bff - 移动端 Safari 对
caret-color支持较弱，且软键盘弹出时有时会强制重置为系统色，测试真机比模拟器更可靠 - 深色模式下，如果用
caret-color: white，但背景是浅灰，反而对比度不足——建议用color-scheme: light dark配合@media (prefers-color-scheme: dark)动态调整
兼容性 fallback 方案其实很有限
没有纯 CSS 的跨浏览器 fallback。Webkit 早期用 ::-webkit-input-placeholder 类似思路去改光标？不存在。伪元素无法选中光标，::selection 也不管用。
真要兼容老浏览器，只能接受默认光标色，或用 JS 监听 focus + blur 做轻量提示（比如加个浮动小图标），但那不是改光标，是绕开问题。
- 别浪费时间写
::-moz-selection或::input-cursor—— 这些都不是标准，也不会生效 - 如果项目必须支持 IE11，直接放弃
caret-color，把设计重心放在border、box-shadow和过渡动画上 - 最易被忽略的一点：某些 Chrome 扩展（如密码管理器）会注入自己的样式，强行覆盖页面的
caret-color，本地测试正常 ≠ 用户环境正常
