caret-color

基线 广泛可用

此功能已得到完善，可在许多设备和浏览器版本中使用。它自以下时间以来在浏览器中可用 2020年1月.

caret-color CSS 属性设置插入点的颜色，插入点是可见的标记，下一个输入的字符将插入到此处。这有时被称为文本输入光标。插入点出现在诸如 <input> 或具有 contenteditable 属性的元素中。插入点通常是一条细的垂直线，会闪烁以使其更醒目。默认情况下，它是黑色的，但可以使用此属性更改其颜色。

试一试

请注意，插入点只是插入点的一种类型。例如，许多浏览器都有一个“导航插入点”，其作用类似于插入点，但可以在不可编辑的文本中四处移动。另一方面，当悬停在文本上时显示的鼠标光标图像（其中 cursor 属性为 auto），或当悬停在元素上时（其中 cursor 属性为 text 或 vertical-text），虽然它有时看起来像一个插入点，但它不是插入点（它是一个光标）。

语法

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: hsl(228deg 4% 24% / 80%);

/* Global values */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;

值

auto

用户代理会为插入点选择合适的颜色。这通常是 currentcolor，但用户代理可能会选择不同的颜色以确保良好的可见性和与周围内容的对比度，同时考虑 currentcolor 的值、背景、阴影和其他因素。

注意：虽然用户代理可能会对 auto 值使用 currentcolor（通常是可动画的），但 auto 在过渡和动画中不会被插值。

<color>

插入点的颜色。

正式定义

初始值auto
应用于所有元素
继承是
计算值auto 的计算方式如指定的那样，<color> 值的计算方式如 color 属性中所定义的那样。
动画类型一个 颜色

正式语法

caret-color = 
  auto     |
  <color>

示例

设置自定义插入点颜色

HTML

html
<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>

CSS

css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

结果

规范

规范
CSS 基本用户界面模块级别 4
# caret-color

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅