caret-shape
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
caret-shape は CSS プロパティで、編集可能な要素に現れるマーカーである挿入カーソルの形状を設定します。このマーカーは、次の文字が挿入または削除される位置を示します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
caret-shape 実験的 | 144 | 144 | | | 144 | |
auto 実験的 | 144 | 144 | | | 144 | |
bar 実験的 | 144 | 144 | | | 144 | |
block 実験的 | 144 | 144 | | | 144 | |
underscore 実験的 | 144 | 144 | | | 144 | |
基本構文
CSS
.terminal-input {
caret-shape: block;
caret-color: lime;
}
.editor {
caret-shape: underscore;
}ライブデモ
実務での使いどころ
-
ターミナル風UIのキャレットカスタマイズ
Webベースのターミナルエミュレーターでブロック型キャレットを使用し、ネイティブターミナルに近い見た目を実現できます。
注意点
- 非常に新しいプロパティで、Chrome 144以降でのみサポートされています。他のブラウザでは通常の縦線キャレットが表示されます。
アクセシビリティ
- キャレットの形状変更はテキスト入力の視認性に影響する可能性があります。特にブロック型キャレットは一部のユーザーにとって見にくい場合があるため、カスタマイズ可能にすることを検討してください。