caret-color プロパティ

最終更新：2026-09-13

caret-color caret-color プロパティ

caret-color プロパティは、input や textarea などの編集可能な要素におけるキャレット（点滅する縦棒）の色を設定します。キャレットの色をカスタマイズすると、フォーム要素をページの配色に合わせたり、現在の入力位置を強調したりできます。

カテゴリ
初期値	auto
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

caret-color: auto | <color>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	デフォルトのキャレットの色
`<color>`	タイプ	キャレットの色

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
caret-color	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： auto はデフォルトで、通常は要素の文字色と一致します。特定の色を設定すると、それが独立して上書きされます。

ヒント： caret-color は継承されるプロパティなので、親要素で一度設定すれば、子要素に色が継承されます。

❓ よくある質問

Qcaret-color プロパティは CSS でどの色形式をサポートしていますか？

Aすべての CSS の色形式をサポートします。キーワード（red、blue）、16 進数（#3498db）、rgb()/rgba()、hsl()/hsla()、および currentColor などの特殊な値です。auto はデフォルトで、キャレットが要素の文字色に従います。また、アニメーションによる色のトランジションにも対応していますが、実際に使われることはまれです。

Qcaret-color と cursor の違いは何ですか？

Acaret-color は、input や textarea 内のテキストキャレット（点滅する縦棒）の色を設定します。これは編集可能なコンテンツです。cursor は、要素にポインタを合わせたときのマウスポインタの形状を設定します。これはポインタデバイスのフィードバックです。名前は似ていますが、対象は完全に異なります。一方はコンテンツのキャレット、もう一方はマウスポインタです。

Qcaret-color プロパティが input に効果を持たないのはなぜですか？

A編集可能な要素（input、textarea、または contenteditable 属性の要素）に適用されているか確認してください。通常の編集不可なテキストにはキャレットがありません。また、高コントラストのシステムテーマなどの強制外观モードでは、ブラウザがカスタムの色を上書きする場合があります。主要なすべてのブラウザ（Chrome、Firefox、Safari、Edge）がサポートしていますが、Safari の旧バージョンでは一部の構文のサポートが不完全です。

Qcaret-color プロパティを contenteditable 要素に適用できますか？

Aはい。contenteditable 要素は input や textarea と同様にテキストキャレットを持つため、caret-color はそこでも機能します。リッチテキストエディタや編集可能な見出しに、デザインシステムに合った統一されたキャレットの色を設定できます。これは継承されるプロパティです。親コンテナで設定すれば、子要素に色が継承されます。