caret-shape

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

caret-shape CSS 属性设置插入符的形状。插入符是可编辑元素中出现的可见标记，指示下一个字符将插入或删除的位置。

试一试

caret-shape: auto;

caret-shape: bar;

caret-shape: block;

caret-shape: underscore;

<section class="default-example container" id="default-example">
  <div>
    <label for="example-element">Edit text field:</label>
    <input id="example-element" type="text" value="Sample text" />
  </div>
</section>

div {
  text-align: left;
}

#example-element {
  font-size: 1.2rem;
  padding: 8px;
  width: 300px;
}

语法

css

/* Keyword values */
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

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

值

auto: 默认值。浏览器决定插入符的形状。这通常遵循平台约定，并可能根据上下文而变化。
bar: 插入符在插入点显示为一条细的垂直线，位于字符之间而不是字符上方。
block: 插入符显示为一个矩形，与插入点后的下一个字符重叠。如果没有字符，则显示在最后一个字符之后。
underscore: 插入符在插入点后的下一个字符下方显示为一条细的水平线。如果没有字符，则显示在最后一个字符之后。

描述

插入符是闪烁的光标，指示键入时文本将插入的位置。不同的插入符形状可以提供有关当前编辑模式的视觉反馈或提供视觉自定义。

编辑模式和插入符形状

文本编辑器通常以两种模式之一运行

插入模式：新字符插入到插入符位置，将现有文本推到行尾。这是大多数现代应用程序中的默认行为。
改写模式（也称为“覆盖模式”）：新字符替换插入符位置的现有字符，而不是插入在它们之间。此模式通常通过 Insert 键切换。

不同的插入符形状有传统用途，例如

竖线插入符位于字符之间，在现代界面中最常见。
块状插入符覆盖下一个字符，通常用于终端应用程序或指示改写模式。
下划线插入符出现在字符下方，可用于某些设计美学，例如模仿打字机或下划线文本输入样式。

插入符定位和行为

caret-shape 属性影响插入符的视觉渲染方式，但不改变其在文本中的逻辑位置。无论其视觉形状如何，插入符始终表示字符之间的插入点。

与书写模式的交互

插入符形状适应文本的 writing-mode。在垂直书写模式下，竖线插入符变为水平，下划线插入符根据文本方向进行适当定位。

正式定义

初始值	`auto`
应用于	elementsThatAcceptInput
继承性	是
计算值	同指定值
动画类型	按计算值类型

正式语法

caret-shape = 
  auto        |
  bar         |
  block       |
  underscore

示例

带有动画插入符的复古终端

此示例展示了如何使用 caret-shape: block 和动画插入符颜色创建复古终端界面，取代了使用边框的旧技术。

关键部分是使用现代插入符属性而不是旧的基于边框的技术。我们将插入符设置为块状，禁用默认闪烁，并创建我们自己的自定义动画。

HTML

html

<label for="terminal">Enter a command</label>
<div class="old-screen">
  <span>></span>
  <textarea id="terminal" class="terminal-input"></textarea>
</div>

CSS

label {
  background: #092104;
  display: block;
  padding: 10px 20px;
  color: #00ad00;
  font-weight: bold;
  font-family: monospace;
}

.old-screen {
  background: repeating-linear-gradient(
    #092104,
    #092104 2px,
    #123208 2px,
    #123208 4px
  );
  height: 140px;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  font-family: monospace;
}

span {
  display: inline-block;
  padding: 2px 5px;
  color: #00ad00;
  font-weight: bold;
  margin-right: 8px;
}

.terminal-input {
  background: transparent;
  height: 100%;
  border: none;
  color: #00ad00;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  flex: 1;
  resize: none;
}

css

.terminal-input {
  caret-shape: block;
  caret-animation: manual;
  animation: old-caret 2s infinite;
}

@keyframes old-caret {
  0%,
  50% {
    caret-color: #00ad00;
  }
  75%,
  100% {
    caret-color: transparent;
  }
}

结果

带有下划线插入符的控制台界面

此示例演示了如何使用 caret-shape: underscore 创建控制台式界面，其中下划线插入符补充了终端美学。

HTML

html

<label for="console">Enter a command</label>
<div class="console-demo">
  <div class="console-output">
    <p>user@host:css-ui-4 $ ls -a</p>
    <p>. .. Overview.bs Overview.html</p>
  </div>
  <div class="console-input">
    <span class="prompt">user@host:css-ui-4 $ </span>
    <input type="text" id="console" class="console" value="cd" />
  </div>
</div>

CSS

label {
  background: #2a2a2c;
  color: white;
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  font-family: monospace;
}

.console-demo {
  background: black;
  color: white;
  font-family: monospace;
  padding: 10px 20px;
  height: 60px;
}

.console-output {
  margin-bottom: 0.5rem;
}

.console-output p {
  margin: 0 0.25rem;
}

.console-input {
  display: flex;
  align-items: center;
}

.prompt {
  margin-right: 0;
}

.console {
  background: transparent;
  border: none;
  color: white;
  padding-left: 1ch;
  font-family: inherit;
  outline: none;
  flex: 1;
}

css

.console {
  caret-shape: underscore;
}

结果

规范

规范
CSS Basic User Interface Module Level 4 # propdef-caret-shape

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 9 月 15 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题