caret-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

caret-color は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである入力キャレットの色を設定します。これはテキスト入力カーソルと呼ばれることもあります。キャレットは <input> または contenteditableML/Global_attributes#contenteditable) 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

試してみましょう

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 cursor プロパティが auto のときにテキスト上に移動した場合や、 cursor プロパティが text または vertical-text の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。

構文

css
/* キーワード値 */
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 ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが currentcolor、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。

メモ: ユーザーエージェントは auto の値に currentcolor (通常はアニメーション可能) を使用することがありますが、 auto はトランジションやアニメーションでは補完されません。

<color>

キャレットの色です。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値auto は仕様通りに計算され、 <color> 値は color プロパティで定義されたように計算される。
アニメーションの種類色

形式文法

caret-color = 
  auto     |
  <color>

例

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

HTML

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

CSS

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

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# caret-color

ブラウザーの互換性

BCD tables only load in the browser

関連情報