caret-shape

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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">テキストフィールドを編集:</label>
    <input id="example-element" type="text" value="サンプルテキスト" />
  </div>
</section>

div {
  text-align: left;
}

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

構文

css

/* キーワード値 */
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

/* グローバル値 */
caret-shape: inherit;
caret-shape: initial;
caret-shape: revert;
caret-shape: revert-layer;
caret-shape: unset;

値

auto: デフォルト値です。ブラウザーがカーソルの形状を決定します。これは通常、プラットフォームの慣習に従いますが、コンテキストによって変更されることがあります。
bar: キャレットは挿入位置に細い垂直線として現れ、文字の上ではなく文字の間に配置されます。
block: キャレットは、挿入位置の直後の文字と重なる矩形として現れます。次の文字がない場合、最後の文字の後に出現します。
underscore: キャレットは、挿入位置の直後の文字の下に細い水平線として現れます。次の文字がない場合、最後の文字の後に出現します。

解説

挿入キャレットは、入力時にテキストが挿入される位置を示す点滅するカーソルです。様々なキャレットの形状は、現在の編集モードに関する視覚的なフィードバックを提供したり、視覚的なカスタマイズを可能にします。

編集モードとキャレットの形状

テキストエディターは通常、次の 2 つのモードのどちらかで操作します。

挿入モード: 新しい文字はキャレットの位置に挿入され、既存のテキストは行末方向へと押し出されます。この動作はほとんどの現行のアプリケーションにおけるデフォルトの動作です。
上書きモード: 新しい文字は既存の文字の間に挿入されるのではなく、キャレット位置の既存の文字を置き換えます。このモードは多くの場合、Insert キーで切り替えられます。

さまざまなキャレットの形状には、次のような伝統的な用途があります。

線形キャレットは文字間に配置され、現行のインターフェイスで最も一般的です。
箱型キャレットは次の文字の上に重なり、多くの場合、ターミナルアプリケーションや上書きモードを示すために使用されています。
下線キャレットは文字の下に現れ、タイプライターを模倣したり下線付きテキスト入力スタイルを再現するなど、特定のデザイン美学に有益です。

キャレットの位置指定と動作

caret-shape プロパティはキャレットの視覚的な表示方法に影響を与えますが、テキスト内の論理的な位置は変更しません。キャレットは、その視覚的な形状にかかわらず、常に文字間の挿入位置を表します。

書字方向との関係

キャレットの形状は、テキストの writing-mode に適応します。縦書きモードでは、線形キャレットは水平になり、下線キャレットはテキストの方向に対して相対的に適切に位置に調整されます。

公式定義

初期値	`auto`
適用対象	elementsThatAcceptInput
継承	あり
計算値	指定通り
アニメーションの種類	計算値の型による

形式文法

caret-shape = 
  auto        |
  bar         |
  block       |
  underscore

例

アニメーションキャレットのあるレトロなターミナル

この例では、caret-shape: block とアニメーション付きキャレット色を使用して、境界線を使用する従来の手法に置き換えるヴィンテージ風ターミナルインターフェイスを作成する方法を示しています。

重要な点は、従来の境界線ベースの手法ではなく、現行のキャレットのプロパティを使用することです。キャレットをブロック図形に設定し、デフォルトの点滅を無効にし、自分自身で独自のカスタムアニメーションを作成します。

HTML

html

<label for="terminal">コマンドを入力</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">コマンドを入力</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