CSS caret-color：テキストカーソルの色を変更

定義と使い方

caret-colorプロパティは、
テキスト入力カーソル（caret、キャレット）の色を指定するプロパティです。

このプロパティは、<input>、<textarea>など、テキストを入力可能なすべての編集可能な要素において、入力カーソル（caret、キャレット）の色を変更することができます。例えば、次のように使用します。

基本の例

caret-colorプロパティは、テキスト入力のカーソル（caret、キャレット）の色のみを指定でき、太さや形状、点滅速度などは制御できません。

構文

auto：ブラウザーが自動的にカーソル（caret、キャレット）の色を選択します。通常、要素のテキスト色や背景色を考慮して、視認性を確保する色を指定します。
<color>：カーソル（caret、キャレット）の色を明示的に指定します。この値にはCSSで許可されているすべての色形式（例：色名（blue）、16進コード（#00a0e9）、RGB、HSLなど）を使用できます。

形式の構文

CSS

/* キーワード値 */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor; /* 現在の要素の文字色 */

/* 色の値 */
caret-color: blue;
caret-color: #00a0e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 6% 24% / 0.8);

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

形式の定義

caret-colorプロパティの形式の定義
初期値	`auto`
適用対象要素	テキスト入力が可能なすべての編集可能な要素
継承	はい

例

CSS

/* 入力フィールドのスタイリング */
#custom-caret-input {
    font-size: 16px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 5px;
    caret-color: red; /* カーソル（caret、キャレット）の色設定 */
}