caret-shape
テキスト入力時に表示されるキャレットの形状を bar（縦線）、block（ブロック）、underscore（下線）から選択できます。テキストエディタやターミナルエミュレーターなど、キャレットの視認性や見た目が重要なアプリケーションで活用できます。caret-color と合わせてキャレットの外観を完全にカスタマイズできます。
概要
テキスト入力時に表示されるキャレットの形状を bar（縦線）、block（ブロック）、underscore（下線）から選択できます。テキストエディタやターミナルエミュレーターなど、キャレットの視認性や見た目が重要なアプリケーションで活用できます。caret-color と合わせてキャレットの外観を完全にカスタマイズできます。
対応ブラウザ
デスクトップ
Chrome 144+
Edge 144+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 144+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
.terminal-input {
caret-shape: block;
caret-color: lime;
}
.editor {
caret-shape: underscore;
}実務での使いどころ
-
ターミナル風UIのキャレットカスタマイズ
Webベースのターミナルエミュレーターでブロック型キャレットを使用し、ネイティブターミナルに近い見た目を実現できます。
注意点
- 非常に新しいプロパティで、Chrome 144以降でのみサポートされています。他のブラウザでは通常の縦線キャレットが表示されます。
アクセシビリティ
- キャレットの形状変更はテキスト入力の視認性に影響する可能性があります。特にブロック型キャレットは一部のユーザーにとって見にくい場合があるため、カスタマイズ可能にすることを検討してください。