无需登录 数据私有 本地保存

CSS caret-color 实验场 - 自定义文本光标颜色

CSS 开发工具 caret-color CSS 光标 自定义
7
0
0
0

CSS caret-color 实验场

实时预览和调整文本光标颜色，探索 caret-color 属性的各种应用场景

颜色控制
#6c63ff
caret-color:
无效的颜色值，请检查格式
当前光标颜色 #6c63ff
格式 HEX
实时预览 点击输入框查看光标效果
主演示输入框
标准输入框
文本域 Textarea
ContentEditable 区域
可编辑的 富文本 区域，光标颜色同样适用。
搜索框 (type=search)
CSS 代码
input, textarea { caret-color: #6c63ff; }

将以上CSS代码添加到你的样式表中，即可全局修改光标颜色。也可以针对特定选择器使用。

深色背景场景

在深色背景上，光标颜色对可见性影响显著。caret-color 可以确保光标始终清晰可见。

深色主题输入框
深色 Textarea
继承性演示

caret-color 是继承属性。子元素会继承父元素的设置，除非显式覆盖。

父容器 (设置了 caret-color) 上方第2个输入框显式设置了 caret-color: auto，覆盖了继承值
常见问题 & 知识点
什么是 caret-color？它有什么作用？
caret-color 是CSS属性，用于设置文本输入框中光标（插入符号）的颜色。它影响 input、textarea 以及任何 contenteditable 元素中的闪烁光标颜色。默认值为 auto，浏览器会根据上下文自动选择颜色（通常与文本颜色一致）。
caret-color 支持哪些颜色值？
支持所有CSS <color> 类型：命名颜色（red, blue）、十六进制（#ff0000）、RGB/RGBA（rgb(255,0,0)）、HSL/HSLA（hsl(0,100%,50%)）、关键字（auto, currentColor, transparent）。甚至可以使用半透明颜色如 rgba(255,0,0,0.5)。
caret-color 的默认值 auto 是如何工作的？
auto 让浏览器自行决定光标颜色。通常光标颜色与元素的 color 属性一致，但浏览器可能会根据背景对比度进行调整。在深色背景下，浏览器可能自动使用浅色光标以确保可见性。不同浏览器的具体实现可能有细微差异。
caret-color 是继承属性吗？
是的，caret-color 是一个继承属性。如果父元素设置了 caret-color，所有包含的输入框和可编辑元素都会继承该颜色，除非子元素显式设置了自己的 caret-color 值。
浏览器兼容性如何？
兼容性非常广泛：Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+、Opera 44+。基本上所有现代浏览器都完全支持。IE 不支持，但IE已停止维护。移动端浏览器（iOS Safari、Android Chrome）也都支持。
caret-color 会影响选中文本的颜色吗？
不会。caret-color 仅影响光标（插入符号）的颜色，不影响选中文本的高亮颜色。选中文本的颜色由 ::selection 伪元素控制。这是两个独立的CSS特性。
可以改变光标形状吗？（caret-shape）
CSS 还有一个实验性属性 caret-shape（Chrome 121+支持），可以设置光标形状为 block（块状）或 underscore（下划线）。不过该属性目前支持有限，Firefox 和 Safari 尚未支持。生产环境建议谨慎使用。
如何为深色模式优化光标可见性？
在深色背景上，建议使用高对比度的亮色光标（如 #ffffff、#f0f0f0、亮黄、浅蓝等）。可以在CSS中使用媒体查询 @media (prefers-color-scheme: dark) 为深色模式设置不同的 caret-color 值，确保光标始终清晰可见。
caret-color: transparent 有什么用途？
设置 caret-color: transparent 可以隐藏光标。这在某些特殊UI场景中可能有用（如自定义光标替代方案、只读展示）。但不推荐在正常输入场景中使用，因为它会严重影响可访问性和用户体验。
🔧 相关工具