caret-color

試してみましょう

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>フィールド内にテキストを入力するとキャレットが見えます。</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

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

構文

/* キーワード値 */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> 値 */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

/* グローバル値 */
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 属性が設定されている要素が含まれます。

キャレットは、<input> 要素のうち password、text、search、tel、email 型に現れることができます。日付や時刻、color、hidden、radio、checkbox 入力型にはキャレットは存在しません。一部のブラウザーでは number 入力型でもキャレットが表示される場合があります。テキストコンテンツを持たない要素にキャレットを表示することも可能です（例えば appearance: none を設定し contenteditable 属性を追加するなど）。ただし、この方法は推奨されません。

キャレットは、編集可能状態が無効化されていない場合に限り、編集可能な要素またはその子孫要素に表示することができます。例えば、子孫要素の contentEditable 属性を false に設定することで編集可能状態は無効化されます。要素が編集不可または選択不可の場合（例：user-select が none に設定されている場合）、キャレットは現れるべきではありません。

キャレットとカーソル

キャレットには複数の種類があります。挿入キャレットのみが caret-color プロパティの影響を受けます。

多くのブラウザーはナビゲーションキャレットを持っています。これは挿入キャレットと同様に機能しますが、編集不可のテキスト内でも動くことができます。

特定の cursor プロパティ値（auto や text など）で表示されるマウスカーソルの画像はキャレットに似ていることがありますが、キャレットではありません。カーソルです。

auto のアニメーション

一般的に、caret-color が auto に設定されるかデフォルトで auto となる場合、ユーザーエージェントはアニメーション可能な currentColor を使用しています。ただし、auto は既定ではアニメーション可能な値ではありません。caret-color を auto から任意の色値へアニメーションまたはトランジションする際、補間は行われません。このアニメーションは離散的です。つまり、色は animation-duration または transition-duration の中間点で currentColor の色に切り替わります。

公式定義

形式文法

caret-color = 
  auto     |
  <color>  

例

独自のキャレット色の設定

HTML

<input value="このフィールドは既定のキャレットを使用します。" size="64" />
<input class="custom" value="キャレットが独自の色になります！" size="64" />
<p contenteditable class="custom">
  この段落は編集可能であり、 同様にキャレットが独自の色です！
</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 属性