caret-color
caret-color は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである入力キャレットの色を設定します。これはテキスト入力カーソルと呼ばれることもあります。これは挿入位置に現れる目印であり、次に入力される文字が追加されるか、または次に削除される文字が除去される位置を示します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 57 | 79 | 53 | 11.1 | 57 | 11.3 | |
基本構文
CSS
/* Brand-color caret */
input, textarea {
caret-color: #6366f1;
}
/* Dark mode */
.dark input {
caret-color: #a5b4fc;
color: #f1f5f9;
background: #1e293b;
}ライブデモ
実務での使いどころ
-
ブランド統一フォーム
フォームのキャレットをブランドカラーに合わせてデザインの統一感を高める。
注意点
- 背景色と同系色のキャレットを指定するとキャレットが見えなくなるため、コントラストに注意する。
アクセシビリティ
- キャレットが視認できるよう、背景色とのコントラスト比を十分に確保する。