【簡単】CSSで点滅カーソル（キャレット）の色を変える【サンプルあり】

パソ君

・CSSでキャレットの色を変えることできる？

こんな疑問にお答えします。

キャレットとはinputタグにフォーカスを当てたときに、点滅する縦線のことですね。

例としてはこちら↓

案件によってはこのキャレットの色を変更する必要があります。

ただ実はCSSで1行書けば、変更可能なんですよね。

ジト

すぐにできるよ！

ということで、この記事では「CSSで点滅カーソル（キャレット）の色を変える」について解説していきます！

【簡単】CSSで点滅カーソル（キャレット）の色を変える【サンプルあり】

そんなキャレットの色を変えたサンプルがこちらになります↓

See the Pen ➀input要素クリック時の枠線の色 by jito-coder (@jito-coder) on CodePen.

フォーカスを合わせればわかるのですが、通常の黒線とは異なっていますよね。

結論：「caret-color」プロパティを使えばOK。

下記のたった１行のコードを書けば、キャレットの色を変更することができます。

input {
    caret-color: red;
}

これだけで変更可能。

textareaに対しても実装可能

textareaに対しても、同じように指定すればキャレットの色をかえることができます。

textarea {
    caret-color: red;
}

クラスに対して行えば、複数に指定可能

先述した方法だと、inputタグ,textareaタグ全てに対して色の指定がかかってしまいます。

それぞれの色を変えたい場合は、クラスに対してcaret-colorを指定しましょう。

<input type="text" name=""  class="hoge"/>
<input type="text" name=""  class="hoge02"/>
<textarea name="" cols="50" rows="5" class="hoge03"></textarea>

.hoge{
    caret-color: orange;
}
.hoge02{
    caret-color: red;
}
.hoge03{
    caret-color: blue;
}

ジト

これでキャレットの色をそれぞれ変更できるね！

他にもinputタグに関する記事があるので、参考に

2023年2月3日 【解説】input要素クリック時の枠線の色を変える方法【CSS】

2023年2月2日 【解説】placeholder（プレースホルダー）の色をCSSで変える方法【サンプル付き】

【簡単】CSSで点滅カーソル（キャレット）の色を変える【サンプルあり】：まとめ

ジト

キャレットの色を変更したい時はためしてみてね！