点滅カーソル、入力フォームなどのキャレットの色を変更出来るcaret-color【CSS】

テキストやフォームのテキストエリア等でカーソルを合わせ、クリックした際に表示される縦長の線をキャレットと言います。このキャレットの色を変更する為のcareto-colorを紹介します。

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

CSSでキャレットの色を変更するの簡単で、以下のようにCSSでキャレットの色を指定するだけとなります。

p {
    caret-color: red;
}

上記のテキストにカーソルを合わせクリックしてみてください。キャレットの色が赤に変更されているかと思います。このように簡単にキャレットの色を変更可能です。

テキストのみだけではなく入力フォームのinputやtextarea、様々な部分に対応しています。
下記では例としてinputを表示します。

input {
    caret-color: orange;
}

colorプロパティの継承について

紹介したcaret-colorですが、個別で指定しない限りは自身や親要素で指定されているcolorプロパティの値が継承されます。
そのため、通常は文字色と一緒で見難くなる事はありませんが、文字色が透明や背景色と同系色の場合はキャレットが見難くなりますので注意が必要となります。

キャレットを非表示にする方法

テキストなどではキャレットを非表示にする必要もメリットもありませんが、リンクのボタンやハンバーガーメニューなどキャレットが表示されていると不自然な場合があります。
そういった場合は以下のようにすると表示されなくなります。

p {
    caret-color: transparent;
}

caret-colorにtransparentを指定する事でキャレットが非表示になります。
これは厳密に言うと非表示ではなく、色を透明にして見えないようにしています。リンクのボタンやハンバーガーメニューなど、キャレットが表示されては不自然な個所はこういった対応をするのもいいかと思います。

さいごに

いかがでしたでしょうか。
普段はあまり気にする事が少ないキャレットですが、場面に合わせて変更する事で見やすいページにする事が可能です。ぜひ覚えて使ってみてください。