caret-color：テキストの挿入位置や選択補助として表示されるキャレットの色を指定する

caret-colorプロパティの説明

caret-colorは、テキストの挿入位置や選択補助として表示されるキャレットの色を指定します。キャレットは入力カーソルと呼ばれることもあります。通常、テキスト1行分の細長い垂直線で点滅するマーカーとして表示されます。

caret-colorは、<input>や<textarea>、contenteditable属性の与えられた編集可能なエリアに表示されます。既定値では黒いマーカーですが、この色を変えるものとして機能します。

caret-colorに指定できる値

auto

ユーザーエージェントの既定値を採用します。一般的にはcurrentcolorが選ばれますが、ユーザーの視認性を高めるために、独自の配色がなされている場合があります。

<color>

CSSで使用できる色指定の値を使って、キャレットの色を変更します。16進数、RGB値、HSL値などが使えます。

caret-colorの使い方とサンプル

caret-colorプロパティの構文は以下の通りです。

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

/* <color>値 */
caret-color: cyan;
caret-color: #ff0000;
caret-color: rgb(0, 0, 0);
caret-color: hsla(198, 97%, 30%, .5);

/* グローバル値 */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: unset;

caret-colorの実例

それでは実際にcaret-colorプロパティの書き方を見ていきましょう。以下の例では、キャレットの色を変えた時の見栄えを、背景白と黒の状況で確認できます。キャレットが視認しづらい場合は、文字列の中間を選択してみて下さい。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.samp_box div {
	margin-top: 1rem;
}
.samp_box input {
	width: 15rem;
	font-size: 2rem;
	vertical-align: middle;
}
#caret_2 {
	caret-color: #f00;
}
#caret_3 {
	caret-color: #0f0;
}
#caret_4 {
	caret-color: #f00;
	background-color: #000;
	color: #eee;
}
#caret_5 {
	caret-color: #0f0;
	background-color: #000;
	color: #eee;
}

<section class="samp_box">
	<div>
		<input id="caret_1" type="text" value="選択して確認">
		<label for="caret_1">指定なし</label>
	</div>
	<div>
		<input id="caret_2" type="text" value="背景白の場合">
		<label for="caret_2">caret-color: #f00;</label>
	</div>
	<div>
		<input id="caret_3" type="text" value="背景白の場合">
		<label for="caret_3">caret-color: #0f0;</label>
	</div>
	<div>
		<input id="caret_4" type="text" value="背景黒の場合">
		<label for="caret_4">caret-color: #f0f;</label>
	</div>
	<div>
		<input id="caret_5" type="text" value="背景黒の場合">
		<label for="caret_5">caret-color: #0f0;</label>
	</div>
</section>