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 ⁨2020年1月⁩.

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

試してみましょう

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

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

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content