此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
caret-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠| 的东西。
尝试一下
caret-color: red;caret-color: auto;caret-color: transparent;<section> <div> <p>Enter text in the field to see the caret:</p> <p><input type="text" /></p> </div></section>#example-element { font-size: 1.2rem;}附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一段cursor 属性是auto 的文本上方时，或移动到cursor 属性是text、vertical-text 的內容上方時，虽然看起来有点像插入光标，但它不是插入光标（caret），而是鼠标指针光标（cursor）。
语法
css
/* Keyword values */caret-color: auto;caret-color: transparent;caret-color: currentColor;/* <color> values */caret-color: red;caret-color: #5729e9;caret-color: rgb(0, 200, 0);caret-color: hsla(228, 4%, 24%, 0.8);值
正式语法
caret-color =
auto|
<color>
示例
HTML
html
<input />CSS
css
input { caret-color: red;}示例演示
规范
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # caret-color |