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;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic User Interface Module Level 3 caret-color の定義 |
勧告 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | auto は仕様通りに計算され、 <color> 値は color プロパティで定義されたように計算される。 |
アニメーションの種類 | 色 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
<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