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

初期値 auto
適用対象 全ての要素
継承 する
アニメーション <color>値
対応ブラウザ caniuseで確認

caret-colorプロパティの説明

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

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

caret-colorに指定できる値

auto
ユーザーエージェントの既定値を採用します。一般的にはcurrentcolorが選ばれますが、ユーザーの視認性を高めるために、独自の配色がなされている場合があります。
<color>
CSSで使用できる色指定の値を使って、キャレットの色を変更します。16進数、RGB値、HSL値などが使えます。

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

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

CSS
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例では、キャレットの色を変えた時の見栄えを、背景白と黒の状況で確認できます。キャレットが視認しづらい場合は、文字列の中間を選択してみて下さい。

表示確認
CSS
.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;
}
HTML
<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>

caret-colorに関連するCSSプロパティ

インターフェイスの装飾
accent-color 一部の要素の強調色を指定する
all 要素の全てのプロパティを初期化する
appearance ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor マウスポインタのカーソルの種類を指定する
scrollbar-base-color スクロールバーのベースになる色を指定する
scrollbar-arrow-color スクロールバーの矢印にあたる色を指定する
scrollbar-face-color スクロールバーの表面にあたる色を指定する
scrollbar-3dlight-color スクロールバーの左端と上端にあたる色を指定する
scrollbar-highlight-color スクロールバーのハイライトにあたる色を指定する
scrollbar-shadow-color スクロールバーの影にあたる色を指定する
scrollbar-darkshadow-color スクロールバーの右端と下端にあたる色を指定する