caret-color：点滅カーソル(キャレット)の色はCSSで変えられる

当サイトのリンクには広告が含まれています。

文章の挿入位置を表す、あの点滅する縦棒をキャレットと言います。

このキャレット、実はCSSのcaret-colorプロパティで簡単に装飾できます。

.sample {
    caret-color: #ff0000;
}

colorプロパティが継承されるので特段意識してこなかった

今までキャレットの色を特段意識した事はありませんでした。

というのもキャレットは要素のcolorプロパティが継承されるので、CSSの装飾で見辛くなる事は基本的には発生しません。

Webサイトのユーザー側がキャレットを意識する機会は入力フォームぐらいだと思いますが、inputのcolorをいじればキャレット色も併せて変わります。そのため制作側としても特段意識せずにいた箇所でした。

さて、先程「基本的には」と述べた通り例外はあります。特に近年はモダンCSSがバンバン使われているので、発生頻度は上昇傾向かと。

私が今回遭遇したパターンは下記のようなCSSです。

この装飾された見出しをPCでクリックしてみてください。キャレットが表示されない^※ですよね。それも当然でcolorの値は透明(ないし白色)を指定しているので見えません。先述したcolorプロパティが継承されるという点は、便利な反面、罠にもなるという事です。

(※追記。iPad等、デバイスによっては空気を読んで表示してくれる模様。Windows環境の主要ブラウザは全滅)

この見出し文字をWordPressのエディター画面で編集しようにもキャレットが見えず、どこにカーソルがいるのかわかりません。せっかく画像文字ではなくテキストで編集出来るように作ったのに、これでは使いづらいですよね。

.sample {
    caret-color: #0A64BE;
}

ここでcaret-colorプロパティの出番です。CSSの追記1つで簡単にキャレットを装飾できます。

見出しをクリックしてみてください。先程と異なりキャレットが表示されています。

以上。caret-colorプロパティの使い方でした。

普段はcolorプロパティの継承があるので意識することはありませんが、こういった事象が発生した際にご活用ください。