caret-color
入力フィールドの点滅するキャレットの色をCSSでカスタマイズできる。ダークモードやブランドカラーに合わせたフォームデザインで統一感を出す際に有用。transparent を指定するとキャレットを非表示にもできる。
概要
入力フィールドの点滅するキャレットの色をCSSでカスタマイズできる。ダークモードやブランドカラーに合わせたフォームデザインで統一感を出す際に有用。transparent を指定するとキャレットを非表示にもできる。
対応ブラウザ
デスクトップ
Chrome 57+
Edge 79+
Safari 11.1+
Firefox 53+
モバイル
Chrome Android 57+
Safari iOS 11.3+
Firefox Android 53+
基本構文
CSS
/* ブランドカラーのキャレット */
input, textarea {
caret-color: #6366f1;
}
/* ダークモード */
.dark input {
caret-color: #a5b4fc;
color: #f1f5f9;
background: #1e293b;
}実務での使いどころ
-
ブランド統一フォーム
フォームのキャレットをブランドカラーに合わせてデザインの統一感を高める。
注意点
- 背景色と同系色のキャレットを指定するとキャレットが見えなくなるため、コントラストに注意する。
アクセシビリティ
- キャレットが視認できるよう、背景色とのコントラスト比を十分に確保する。