caret-color

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

結果

仕様書

ブラウザーの対応

関連情報

• <input> 要素
• 要素のテキストを編集可能にする HTML の contenteditable 属性
• Making content editable
• Applying color to HTML elements using CSS
• <color> データ型
• その他の色に関するプロパティ: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color