HTML中CSS caret-color自定义文本输入光标颜色的方法-html教程-PHP中文网

caret-color能直接改光标颜色，但仅对input[type="text/search/url/tel"]、textarea、contenteditable="true"元素生效；对number/checkbox/radio等无效，且受浏览器支持、焦点状态、样式优先级及移动端限制影响。

html中css caret-color自定义文本输入光标颜色的方法

caret-color 能直接改光标颜色，但不是写了就生效——它只在现代浏览器中起作用，且必须写对元素、写对时机、写对条件。

只对真正可编辑、有文本插入能力的元素有效：

input[type="text"]、input[type="search"]、input[type="url"]、input[type="tel"]（但 input[type="number"]、input[type="date"] 在 Safari/Chrome 中被禁用）
textarea
div[contenteditable="true"]（注意：必须显式设 contenteditable="true"，仅靠 JS 动态添加属性不触发样式）

以下情况完全无效：

input[type="checkbox"]、input[type="radio"]
没加 contenteditable 的普通 div
富文本编辑器里你给外层 wrapper 设了 caret-color，但真实编辑区域是内层 div[contenteditable] 或 textarea

最常见原因不是语法错，而是条件不满足或被覆盖：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

被更高优先级规则重置，比如某处写了 input { caret-color: auto !important; }，或 UI 框架（如 Normalize.css）全局设了 caret-color: auto
父级设了 color: transparent，子元素又没显式声明 caret-color，导致光标继承为透明（看不见 ≠ 未生效）
iOS Safari 在 font-size 渲染值小于 16px 时会强制放大并忽略 caret-color
Chrome 115+ 启用了系统级“强制颜色滤镜”时，caret-color 可能被浏览器直接忽略
移动端软键盘弹出后，Safari 有时会重置光标色，需搭配 transform: translateZ(0) 强制重绘

验证是否生效：临时把值设成 red 或 #ff00ff，再检查 DevTools 的 Computed 面板里 caret-color 的最终值是不是你预期的。

IE 完全不支持，Safari ≤11.0 和 Android 4.4 WebView 也无效——不能只靠 @supports (caret-color: auto) 做检测，因为有些环境连检测都失败：

统一设基础色：input, textarea { caret-color: #007bff; }
加前缀兜底（无害）：-webkit-caret-color: #007bff;（Safari ≤14.1 需要，新版自动忽略）
深色模式下别硬写死颜色，配合媒体查询：@media (prefers-color-scheme: dark) { input { caret-color: #4ecdc4; } }
密码输入框在 Safari 15–16.3 存在闪退 bug，可加 transform: translateZ(0) 触发重绘
对 input[type="number"] 等受限类型，改用 type="text" + inputmode="numeric" + JS 校验更可控

不冲突，但有优先级关系：

caret-color 明确指定时会覆盖默认光标颜色（即跟随 color 的行为）
若未设置 caret-color，光标默认取 color 值的深色变体（如 color: white 时，光标通常也是白色；但 macOS Safari 可能强制转为灰）
常见误操作是只改了 color 却没设 caret-color，结果在深色背景上光标看不见——因为光标跟着变成了深色
想让光标始终高对比：显式设置 caret-color: #fff 或 caret-color: #000
想随文字变色但保持可见：可用 caret-color: currentColor，但注意部分老浏览器不支持该值