CSS3

：

プロパティ

：

caret-color

　 編集：2022.07.14 by T.A.

→●、mdn

挿入キャレットの色付け。

名前 caret-color
値 auto | <color>
初期値 auto
適用対象 すべての要素
継承 される
百分率 受容しない
算出値 auto に対しては auto。<color> 値に対しては算出色 [CSS-COLOR-4]
正準的順序 文法に従う
アニメーション型 算出値の型による

キャレット：キー カーソル「|」のこと。

auto
ユーザー エージェントは currentcolor を利用するべきである。ユーザー エージェント は、良好な視認性／周囲の内容とのコントラストを確保するため、キャレットの色を自動的に調整してもよい ― currentcolor、背景、影、等々に基づくなどして。

注記： caret-shape が block のとき、良好な可視性とコントラストを確保することは、currentcolor 以外の色を ユーザー エージェント が決定することで最良に達成される。 

<INPUT type=text style="border:1px solid red;
 color:pink;
 caret-color:auto;
">
colorの値が採用された 

<SPAN style="color:pink;">
 <INPUT type=text style="border:1px solid red;
  caret-color:auto;
 ">
</SPAN>
親からのcolorの値が採用されない

<color> ○
挿入キャレットの色は、指定された色になる。 
<INPUT type=text style="border:1px solid red;
 caret-color:red;
">

キャレットは、利用者が［テキスト（あるいは他の内容もあり得る）を挿入できる所を指す、要素内の挿入箇所］を、視覚的に指示するものである。このプロパティは、その可視指示子の色を制御する。

注記： ユーザー エージェント は、追加の何かを“キャレット”と扱うこともある。例えば、ユーザー エージェント には“ナビキャレット”を示すものもあり、挿入キャレットと似たように動作しつつ、キャレットとして機能するように編集できないテキスト周りにも移動し得る。他方、cursor プロパティが［auto／［text／vertical-text］］にされた［テキスト／要素］を hover するときに示されるカーソル画像は、キャレットに似せられることもあろうが、キャレットではない（それはカーソルである）。 

<TEXTAREA style="caret-color:#00aacc">
caret-color:#00aacc
</TEXTAREA>

表示結果：

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：