CSS の caret-color プロパティは、 <input> 又は contenteditable 属性のついた要素などの中の入力キャレット — ユーザーが次に入力した文字が入力される場所を示す視覚的なインジケーター — の色を設定します。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

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

構文

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

/* <color> 値 */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

auto
ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に currentcolor ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 currentcolor、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。
メモ: ユーザーエージェントは auto の値に currentcolor (通常はアニメーション可能) を使用することがありますが、auto はトランジションやアニメーションで補完されません。

 

<color>
キャレットの色です。

形式文法

auto | <color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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: .5em;
}

input.custom {
  caret-color: red;
}


p.custom {
  caret-color: green;
}

結果

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
caret-color の定義
勧告 初回定義

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 44Safari 完全対応 11.1WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 53Opera Android 完全対応 44Safari iOS 完全対応 11.1Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, YuichiNukiyama
最終更新者: mfuji09,