テキスト入力欄（input や textarea）をクリックすると、文字が入る位置に細い点滅する縦線が現れます。この線をキャレット（テキストカーソル）と呼びます。標準では黒などの地味な色で表示されますが、CSS の caret-color プロパティを使うと、この点滅する線の色を自由に変えられます。この記事では、caret-color の基本の書き方から、指定できる値、input・textarea・contenteditable での効き方、うまく反映されないときの原因までを、実際に入力して試せるデモを交えて解説します。
目次
caret-color はテキストカーソルの色を変えるプロパティ
caret-color は、文字入力ができる要素で点滅している挿入用のキャレット（テキストカーソル）の色を指定するためのプロパティです。ここでいうキャレットは、文字を入力するとその位置に文字が挿入される、あの縦棒のことです。マウスポインタの形を変える cursor プロパティとは別物で、caret-color はあくまで「入力位置を示す線」の色だけを扱います。
基本の書き方は、対象の要素に caret-color と色を指定するだけです。
/* 入力欄のキャレット（テキストカーソル）を赤にする */
input {
caret-color: #e53935;
}これだけで、その入力欄をクリックしたときに点滅するカーソルが赤色になります。背景色や文字色には影響せず、変わるのはキャレットの色だけです。
input・textarea・contenteditable で試す
caret-color は、文字入力ができる要素であればまとめて効かせられます。input や textarea はもちろん、contenteditable 属性を付けて編集可能にした要素のキャレットにも適用されます。下のデモは、3種類の入力箇所すべてに caret-color: #e53935; を指定したものです。それぞれをクリックして文字を入力し、点滅するカーソルが赤くなっているのを確認してみてください。CSS タブの色コードを書き換えると、キャレットの色が変わります。
<div class="demo">
<label>お名前
<input type="text" placeholder="ここをクリックして入力">
</label>
<label>メッセージ
<textarea placeholder="ここに入力するとキャレットが赤色に"></textarea>
</label>
<p class="editable" contenteditable="true">この段落は直接編集できます。カーソルの色に注目してください。</p>
</div>
.demo {
padding: 24px;
font-family: sans-serif;
display: flex;
flex-direction: column;
gap: 16px;
}
label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
}
input,
textarea,
.editable {
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
/* キャレット（入力カーソル）の色を赤にする */
caret-color: #e53935;
}
textarea {
min-height: 70px;
resize: vertical;
}
.editable {
background: #fff;
line-height: 1.7;
}
指定できる値
caret-color には通常の色の値のほか、auto と transparent という特別な値を指定できます。それぞれの意味は次のとおりです。
| 値 | 効果 |
|---|---|
auto | 初期値。ブラウザが適切なキャレット色を自動で決める（多くは currentColor に近い挙動） |
色の値（#e53935 / red / rgb(...) など） | 指定した色でキャレットを表示する |
transparent | キャレットを透明にして見えなくする |
初期値は auto です。auto は「ブラウザにおまかせ」という意味で、多くのブラウザでは文字色（currentColor）に近い色でキャレットを表示します。ただし auto のときに具体的にどの色になるかはブラウザに委ねられているため、確実に色を決めたいときは currentColor や具体的な色を明示するのが安全です。
transparent を指定するとキャレットが透明になり、入力位置の線が見えなくなります。独自の入力 UI を作るなど、標準のキャレットを隠したい特別な場面で使いますが、通常のフォームで透明にすると入力位置が分からず操作しづらくなるため、使いどころには注意してください。
フォーカス時だけ色を変える・文字色と揃える
実務では、入力欄がフォーカスされたときにボーダーやキャレットの色をブランドカラーに揃える、といった使い方がよくあります。:focus と組み合わせれば、フォーカス中のキャレット色だけを変えられます。
input {
border: 1px solid #ccc;
/* フォーカスしていないときは文字色と同じキャレット */
caret-color: currentColor;
}
/* フォーカス時にボーダーとキャレットをまとめてブランドカラーへ */
input:focus {
border-color: #2962ff;
caret-color: #2962ff;
outline: none;
}caret-color: currentColor; と書くと、キャレットの色をその要素の文字色（color）に合わせられます。文字色を変えたときにキャレットも自動で追従するので、色を一箇所で管理したいときに便利です。フォーカス時だけボーダーとキャレットを同じ色にすると、入力中の欄がひと目で分かる自然な見た目になります。
caret-color が効かないときに確認すること
テキスト入力できない要素に指定している
caret-color が効くのは、キャレット（挿入位置の線）が現れる要素、つまり文字を入力・編集できる要素だけです。input や textarea、contenteditable を付けた要素には効きますが、ただの div や p、あるいは type="checkbox"・type="range" のようにテキストを入力しない input には、そもそもキャレットが出ないため見た目は変わりません。色が反映されないときは、まず対象がテキスト入力できる要素かを確認してください。
別のルールで上書きされている
指定したはずの色にならないときは、より詳細度の高いセレクタや、あとから読み込まれた CSS で caret-color が上書きされていないかを確認します。特に :focus 用のルールを別に書いている場合、フォーカス時だけ想定と違う色になることがあります。ブラウザの開発者ツールで対象の入力欄を選び、caret-color にどの値が最終的に適用されているかを見ると原因を切り分けやすくなります。
auto のまま色が変わらないと思っている
caret-color を指定していない、あるいは auto のままだと、キャレットの色はブラウザ任せになります。auto は多くの環境で文字色に近い色になりますが、背景色との組み合わせによっては見えにくくなることもあります。狙った色を確実に出したいときは auto に頼らず、currentColor か具体的な色の値を明示しましょう。
まとめ
caret-color は、テキスト入力欄で点滅するキャレット（テキストカーソル）の色を変えるプロパティです。input・textarea・contenteditable のようにテキストを入力できる要素に効き、色の値のほか auto（初期値・ブラウザ任せ）や transparent（透明にして隠す）を指定できます。currentColor を使えば文字色と揃えられ、:focus と組み合わせればフォーカス中だけキャレット色を変えることもできます。色が変わらないときは、対象がテキスト入力できる要素か、別のルールで上書きされていないかを確認するとよいでしょう。フォームの細部までブランドカラーに揃えたいときに役立つプロパティです。