入力フォームのキャレット（点滅カーソル）をCSSでカスタマイズする

入力フォームの文字入力時に点滅するアレの色を変えたい。
アレの名前は「キャレット」といいます。
いままで「カーソル」と呼んでいて、今回初めて知りました🧐

CSSプロパティ caret-color で見た目をカスタマイズできます。
色変更以外にもCSSでいろんなデザインをすることも可能です。

CSS

caret-color で色番号を指定すると色変更が可能です。

css

input[type="text"],
textarea{
  caret-color:lightcoral;
  border:1px solid #000;
  padding:10px;
}

input[type="text"]:focus,
textarea:focus{
  border:2px solid lightcoral;
  outline: none;
}

デモ

caret-color はinputとtextareaに対応していますので、両方に指定を行います。

対応ブラウザ

Can I Useによると、IEを除く主要ブラウザは caret-color に対応しています。

https://caniuse.com/css-caret-color

サイトデザインに合わせて、さりげなくキャレットの色を変更できると素敵ですよね😉
以上です！

参考サイト

「caret-color」について参照したサイトです。

https://developer.mozilla.org/ja/docs/Web/CSS/caret-color
Mozillaの解説。

https://www.samanthaming.com/tidbits/31-css-caret-color/

https://www.w3schools.com/cssref/css3_pr_caret-color.php

https://www.tohoho-web.com/css/prop/caret-color.htm
とほほさんの説明はわかりやすい。

おまけ：用語解説サイト

「キャレット」について用語解説しているサイトです。

https://developer.mozilla.org/ja/docs/Glossary/Caret

https://www.sophia-it.com/content/キャレット

https://ja.wikipedia.org/wiki/キャレット