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