caret-color 仅控制光标颜色，不支持动画或闪烁节奏；自定义闪烁需用 contenteditable + ::after 伪元素 + @keyframes 实现。
不能用 caret-color 控制闪烁节奏，它只管颜色；想自定义闪烁频率或做“开关式”闪烁，必须放弃原生光标，用 contenteditable + 自绘光标 + @keyframes。
为什么 caret-color 无法实现闪烁动画
caret-color 是纯样式属性，仅影响光标颜色，不触发重绘、不支持动画、不可继承，也不能和 opacity 或 transform 联动。浏览器对原生输入框光标的渲染完全封闭——你加 animation: blink 1s infinite 到 input 上，什么也不会发生；强行加 opacity 动画会导致焦点丢失、输入中断，实测必崩。
-
caret-color在 Chrome 57+、Firefox 61+、Safari 11.1+、Edge 79+ 支持，但仅限颜色 - Safari 11.0 及更早、所有 IE、Android 4.4 WebView 完全忽略该属性，且无降级提示
- 对
contenteditable元素支持极差：Firefox 一直不支持，Safari 直到 15.4 才有限支持
用 contenteditable + ::after 模拟可动画光标（推荐）
这是目前唯一稳定、可控、无需 JS 的方案：把文本容器设为 contenteditable="true"，用伪元素模拟竖线光标，并通过 @keyframes 控制其 opacity。
- HTML 结构只需：
<div contenteditable="true" class="typing-input">Hello</div> - CSS 中用
.typing-input::after绘制光标：content: '|'; position: absolute; right: 0; opacity: 1; - 动画定义必须闭环：
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } - 应用时加
animation: blink 0.8s step-end infinite;——step-end避免渐变过渡，保证“开/关”感
给只读 input 加模拟光标要绕过哪些坑
只读 input 本身禁用编辑，但视觉上需要“活跃感”，此时不能监听输入事件，只能靠结构包裹 + 定位微调。
- 必须用容器包裹：
<div class="input-wrapper"> <input readonly><span class="caret"></span> </div> -
.input-wrapper设position: relative，.caret设position: absolute并手动对齐到文字末尾（需匹配line-height和padding） - 若
input内容动态变化（如计算结果），需 JS 同步更新.caret的left值（用getBoundingClientRect()测量文字宽度） - 别用
border-right模拟光标：在缩放或字体加载不全时容易错位；::after更稳
兼容老浏览器时的 fallback 策略
当项目必须支持 IE 或 Android 4.4 WebView，caret-color 和 @keyframes 都失效，只能退到“视觉近似”方案。
- 对
input和textarea：优先写caret-color: #ff6b6b，再加input:focus { outline: none }防双光标 - 对老环境，改用
color: transparent+::selection { background: #ff6b6b }，让选中时高亮，模拟光标存在感（仅适用于单行） - 真要保闪烁？只能上轻量 JS：
setInterval(() => el.classList.toggle('blink'), 500)，配合.blink { opacity: 0.3 }过渡 - 务必监听
@media (prefers-reduced-motion: reduce)，里面直接animation: none
真正难的不是写出闪烁，而是判断哪里该闪、闪多快、闪多久。用户盯着一个每 300ms 闪一次的光标看 5 秒，注意力就断了；而表单校验失败时闪 2 次红光标，比任何文字提示都直接。别为了“酷”加动画，先想清楚它服务的是什么交互意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
