免费在线CSS光标颜色生成器，自定义输入框和文本域的光标（caret）颜色，支持自定义颜色/auto/currentColor/透明隐藏，实时预览。一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 光标颜色设置
自定义输入框文本光标（caret）颜色。
👁️ 实时预览
点击下方输入框，观察光标颜色变化。尝试输入文字查看效果。
💻 CSS代码
📖 CSS caret-color 详解
caret-color 属性用于控制输入框、文本域或可编辑元素中文本插入光标（caret）的颜色。这是一个纯视觉属性，不影响功能。
什么时候用️ 在线CSS光标颜色生成器
- 品牌色统一 — 让光标颜色与品牌色一致
- 暗色模式 — 在深色背景上使用亮色光标更容易定位
- 错误状态 — 表单验证失败时将光标变为红色
- 隐藏光标 — 使用 transparent 在某些 UI 模式中隐藏光标
浏览器兼容性
所有现代浏览器均已支持 caret-color 属性，无需前缀。