入力キャレットの色を変える caret-color プロパティ（CSS3 UI）

投稿

CSS3 UI にcaret-color プロパティ(W3C)があることを知りました。<input> や <textarea> などで入力キャレット（入力欄にフォーカスを当てたときに点滅する縦棒）の色を設定するものです。

サムネイル画像
input { caret-color: red } を設定したサンプルオリジナル画像

実際の使いどころとしては次のようなケースでしょうか。

  • 入力欄の文字色と入力キャレット色を合わせる
  • 入力欄の枠線色（border-color）と入力キャレット色を合わせる

前者については、 Windows と Android の Firefox 62, Chrome 70 では color プロパティを設定すると自動的に入力キャレットの色も変わります。

一方、 iOS の各ブラウザ（Safari 12, Chrome 70, Firefox 14）や Windows Edge 18 はそうはならないので、デフォルトの色がページデザインと合わない場合は caret-color プロパティを使ってみてもいいかもしれません。

サムネイル画像
iOS Safari 12 で input { color: red } のみを設定。入力したテキストは赤くなったが、キャレットは青色。オリジナル画像
サムネイル画像
iOS Safari 12 で input { color: red; caret-color: red } を設定。テキスト、キャレットともに赤色。オリジナル画像

対応ブラウザについては、Can I use...(Can I use...)によると Firefox, Chrome, (macOS) Safari のみと書かれていますが、手元の iOS 12 の Safari でも効いていたので、メジャーブラウザでは Edge と IE 以外の最新ブラウザが対応している状況のようです。