CSSで入力欄の文字カーソルの色と点滅を変える方法

​2026年11月15日​CSS​HTML,Playwright

入力欄で点滅する縦線（キャレット）の色は caret-color で、点滅するかどうかは caret-animation で変えられます。caret-animation: manual で点滅を止め、@keyframes で caret-color を動かせば、ゆっくり明滅するような独自の動きにもできます。caret-color はおもなブラウザーで使えます。caret-animation は、互換性データでは Chrome や Edge など Chromium 系のブラウザーが対応し、Firefox と Safari は未対応です。

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

caret-color は、入力欄で次の文字が入る位置を示すキャレットの色を決めるプロパティです。色の値をそのまま書きます。

input {
  caret-color: #d85878;
}

検証環境で、文字の色が #1f2a30 の入力欄にフォーカスし、キャレットの位置の画素を調べました。指定なしではキャレットは文字と同じ #1f2a30 で、caret-color: #d85878 を付けると #d85878 になりました。caret-color: transparent では、キャレットの位置に色の付いた画素がなくなり、キャレットが見えなくなりました。

初期値は auto です。CSS の仕様では、auto のときはブラウザーが currentColor（文字の色）を使うべきとされ、背景などに合わせて見やすい色に変えてもよいとも書かれています。検証環境では、caret-color: auto と color: #067a98 を指定した入力欄のキャレットは #067a98 でした。getComputedStyle() で読んだ caretColor も、auto ではなく rgb(6, 122, 152) という文字の色が返りました。

caret-color は子要素に継承されます。form に caret-color: #d85878 を指定すると、指定のない中の input のキャレットも #d85878 になりました。textarea と contenteditable を付けた div でも、同じように色が変わりました。

caret-animation: manual で点滅を止める

caret-animation は、キャレットの点滅を決めるプロパティです。値は auto と manual の2つで、初期値は auto です。

input {
  caret-animation: manual;
}

CSS の仕様では、auto のときはブラウザーがキャレットの動かし方と速さを決め、OS の慣習や設定に合わせるとされています。manual のときは、ブラウザーはキャレットを動かしてはいけない、と決められています。

検証環境で、入力欄にフォーカスしてから3秒間、キャレットの見え方を記録しました。指定なしと auto では、約0.5秒ごとに表示と非表示が入れ替わりました。manual では、3秒間ずっと表示されたままでした。

auto のままで文字を入力すると、点滅の周期がやり直されました。検証環境で、キャレットが消えている1.7秒ごろに「a」を入力すると、キャレットはすぐに表示され、そこから約0.5秒、表示されたままでした。

caret-animation も継承されるので、form に指定すれば、中の入力欄すべての点滅を止められます。検証環境でも、form に caret-animation: manual を指定すると、中の input の getComputedStyle() の値は manual になりました。

@keyframes でキャレットの色を動かす

caret-color は、CSS のアニメーションで動かせます。点滅の代わりに、ゆっくり明滅させる書き方は次のとおりです。

@keyframes caret-fade {
  from {
    caret-color: transparent;
  }
  to {
    caret-color: #d85878;
  }
}

input {
  caret-color: #d85878;
  caret-animation: manual;
  animation: caret-fade 0.75s linear infinite alternate;
}

検証環境では、キャレットの色が約0.75秒かけて #d85878 に近い色まで濃くなり、また見えなくなるまで薄くなる動きをくり返しました。caret-animation: manual を外して auto のままにすると、この動きの途中で、約0.5秒ずつキャレットが消えました。ブラウザーの点滅と CSS のアニメーションが重なるためです。MDN の caret-animation のページと CSS の仕様でも、自分でアニメーションを付けるときは、manual で点滅を止めるよう勧めています。

仕様には、2つの色を交互に切り替える例も載っています。step-end を使うと、途中の色を通らずに切り替わります。

@keyframes caret-two-colors {
  50% {
    caret-color: #00c8e8;
  }
}

input {
  caret-color: #d85878;
  caret-animation: manual;
  animation: caret-two-colors 2s step-end infinite;
}

検証環境では、キャレットが #d85878 と #00c8e8 に1秒ずつ切り替わりました。

動きを減らす設定のときはアニメーションを付けない

キャレットを自分で動かすときは、OS で視覚効果を減らす設定にしている人のことも考えます。prefers-reduced-motion のメディアクエリーで、動きを減らす設定がないときだけアニメーションを付けられます。

input {
  caret-color: #d85878;
  caret-animation: manual;
}

@media (prefers-reduced-motion: no-preference) {
  input {
    animation: caret-fade 0.75s linear infinite alternate;
  }
}

Playwright の emulateMedia({ reducedMotion: 'reduce' }) で動きを減らす設定にすると、キャレットは #d85878 のまま動きませんでした。no-preference にすると、明滅する動きになりました。

この書き方では、動きを減らす設定のときもキャレットは点滅せず、点いたままになります。CSS の仕様にも、点滅がつらい人がユーザースタイルシートで caret-animation: manual を指定し、点滅を止める例が載っています。

対応していないブラウザーへの備え

互換性データでは、各ブラウザーが次のバージョンから対応しています。

CSS の仕様では、manual を守らないブラウザーはこのプロパティを実装してはいけないと決めています。そのうえで、@supports (caret-animation: manual) で対応を確かめて書き分けられるようにしています。上で試したように、点滅を止めないまま @keyframes の動きを付けると、ブラウザーの点滅と重なります。点滅を止められるときだけ動きを付けるには、次のように書きます。

input {
  caret-color: #d85878;
}

@supports (caret-animation: manual) {
  input {
    caret-animation: manual;
  }

  @media (prefers-reduced-motion: no-preference) {
    input {
      animation: caret-fade 0.75s linear infinite alternate;
    }
  }
}

@supports の外には色の指定だけを置き、点滅を止める指定とアニメーションは @supports の中に入れています。検証環境の Chromium 153 では、CSS.supports('(caret-animation: manual)') は true を返しました。この CSS では、動きを減らす設定のときはキャレットが点いたまま、設定がないときは明滅する動きになりました。CSS.supports('caret-animation', 'none') は false で、none という値はありません。

MDN には、caret-color、caret-animation、caret-shape をまとめて書ける一括指定の caret のページもあります。ただし、検証環境の Chromium 153 では CSS.supports('caret', '#d85878 manual') は false でした。caret: #d85878 manual と書いた入力欄は、キャレットの色も点滅も初期値のままでした。互換性データ（8.1.8）にも caret の項目はありません。いまは caret-color と caret-animation を別々に書きます。