CSS - caret-shape

• トップ
• CSSリファレンス
• caret-shape

概要

説明

テキストエリアなどテキスト入力要素におけるキャレット(カーソル)の形状を指定します。2026年1月の Chrome 144 でサポートされました。

auto

ブラウザにまかせます。

bar

縦線で表示します。

block

矩形ブロックで表示します。

underscore

下線で表示します。

使用例

.caret-shape-bar { caret-shape: bar; }
.caret-shape-block { caret-shape: block; }
.caret-shape-underscore { caret-shape: underscore; }

<textarea class="caret-shape-bar">bar</textarea>
<textarea class="caret-shape-block">block</textarea>
<textarea class="caret-shape-underscore">underscore</textarea>

リンク

• https://drafts.csswg.org/css-ui/#caret-shape
• https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/caret-shape
• https://caniuse.com/wf-caret-shape