We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

要約

caret-color CSS プロパティは、ユーザーがテキストやその他のコンテンツを挿入する要素の挿入箇所の可視インジケータであるキャレットの色を定義します。

ノート: ユーザーエージェントには、 “carets” としてカウントされる追加機能があることがあります。たとえば、挿入キャレットと似ていますが、編集できないテキスト内を移動でき、機能的にはキャレットである “ナビゲーションキャレット” などがありえます。一方、cursor プロパティが auto のときにテキスト上をホバーした場合や、cursor プロパティが textvertical-text のときに、表示されるカーソル画像がキャレットに見えることがありますが、実際には異なります(それはカーソルです)。

初期値auto
適用対象全要素
継承継承する
メディアinteractive
計算値auto is computed as specified and <color> values are computed as defined for the color property.
Animation typecolor
正規順序per grammar

構文

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
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 を使用することがありますが、autocurrentcolor 値とは異なり、transition や animation で補完されません。
<color>
キャレットの色として指定した色を使用する。

形式的な構文

auto | <color>

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

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

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

HTML コンテンツ

<input id="example" />

CSS コンテンツ

#example {
  caret-color: red;
}

結果

仕様

仕様 ステータス コメント
CSS Basic User Interface Module Level 3
caret-color の定義
勧告案 初期定義。

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 57.0 未サポート 53.0 (53.0) 未サポート 未サポート ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 53.0 (53.0) 未サポート 未サポート ?

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

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