caret-color

テキスト・フォント

テキスト入力時のカーソル(キャレット)の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。

構文

Syntax
caret-color: auto | <color>

コード例

1

caret-color: red;

カーソルを赤色にする

2

caret-color: #3b82f6;

カーソルを青色にする

3

caret-color: transparent;

カーソルを非表示にする

4

caret-color: auto;

デフォルトの色(通常は黒)

💡 TIPS

ブランドカラーに合わせたり、ダークモードで見やすくできる。アクセシビリティも考慮して、コントラストの高い色を選ぶ。

⚠️ よくある間違い

input、textarea、contenteditableな要素にのみ効果がある。通常のテキストには効かない。

関連プロパティ

ブラウザサポート

Chrome 57+, Firefox 53+, Safari 11.1+