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 上檢視此頁面 • 報告此內容的問題