caret-color

试一试

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

#example-element {
  font-size: 1.2rem;
}

语法

/* 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，即将被修改的文本的 color。

<color>

插入符号的颜色。

描述

插入符号是可编辑文本中——或接受文本输入的元素中——内容的插入点（或删除点）的可见指示器。插入符号通常是一条细长的垂直线，指示字符添加或删除发生的位置。它通常会闪烁（时亮时灭），以便更引人注目。插入符号只在可编辑元素获得焦点时出现。默认情况下，此插入符号的颜色与文本颜色相同。caret-color 属性可用于将此插入符号的颜色设置为 currentColor 以外的颜色，或将已着色的插入符号重置回其默认颜色。

auto 值将插入符号设置为 currentColor，即正在添加或删除的文本的 color。用户代理可能会选择不同的颜色，以确保与周围内容有良好的可见性和对比度，同时考虑 color、background-color、阴影和其他因素。然而，实际上，所有浏览器默认都使用当前颜色，并且当 caret-color 设置为 auto 时也如此。您可以将任何有效的 <color> 设置为值。

理解插入符号

插入符号，以及因此该属性，仅适用于可接受文本输入的文本或元素。插入符号出现在用户可更新内容的焦点用户界面元素中，例如接受自由格式文本的 <input> 元素、<textarea> 元素以及设置了 contenteditable 属性的元素。

插入符号可能出现在类型为 password、text、search、tel 和 email 的 <input> 元素中。对于日期、color、hidden、radio 或 checkbox 输入类型，不存在插入符号。某些浏览器会在 number 输入类型中显示插入符号。在某些浏览器中，可以使插入符号出现在从不包含文本内容的元素中——例如，通过设置 appearance: none 并添加 contenteditable 属性。然而，不建议这样做。

插入符号可以显示在可编辑元素或其后代中，前提是可编辑性未被禁用，例如通过将后代元素的 contentEditable 属性设置为 false。如果元素不可编辑或不可选择，例如如果 user-select 设置为 none，则不应出现插入符号。

插入符号与光标

插入符号有多种类型。插入符号是唯一受 caret-color 属性影响的类型。

许多浏览器都有导航插入符号，其作用类似于插入符号，但可以在不可编辑文本中移动。

某些 cursor 属性值（例如 auto 或 text）所显示的鼠标光标图像可能类似于插入符号，但它不是。它是光标。

从 auto 动画

通常，当 caret-color 设置为或默认为 auto 时，用户代理会使用可动画的 currentColor。然而，auto 默认不是一个可动画的值：当 caret-color 从 auto 动画或过渡到任何颜色值时，不会发生插值。动画是离散的；颜色在 animation-duration 或 transition-duration 的中点从 currentColor 颜色切换或切换到 currentColor 颜色。

正式定义

正式语法

caret-color = 
  auto     |
  <color>  

示例

设置自定义插入符号颜色

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

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

input.custom {
  caret-color: orange;
}

p.custom {
  caret-color: green;
}

结果

规范

浏览器兼容性

另见

• caret-animation、caret-shape
• caret 简写
• color
• text-emphasis
• cursor
• text-emphasis
• CSS <color> 数据类型
• <input> 元素
• HTML contenteditable 属性