caret-color でキャレットの色を変える

• caret-color | MDN
• CSS caret-color | Can I Use

caret-color でキャレットの色が変えられるようで、いまは Firefox と Chrome でこのプロパティが使える。

デモを用意した。入力エリアをクリックすると、枠線と同じ色でキャレットが表示される。

• (Demo) caret-color でキャレットの色を変える | JSFiddle

デモで表示を確認するまでは細かすぎて使いどころがあるか疑問だったが、枠線とキャレットの色が揃えられるのは見た目的にいいな。統一感があってがきれい。

まだ対応してないブラウザもあるが、caret-color が適用されなくても操作上困ることがなさそうなので、もう使い始めてもよさそう。