試してみましょう
caret: red;
caret: block manual;
caret: underscore auto green;
caret: bar manual orange;
<section class="default-example container" id="default-example">
<div>
<label for="example-element">テキストフィールドを編集:</label>
<input id="example-element" type="text" value="サンプルテキスト" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 個別の値 */
caret: red; /* caret-color のみ */
caret: block; /* caret-shape のみ */
caret: manual; /* caret-animation のみ */
/* 2 つの値 */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* 3 つの値 */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* グローバル値 */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
caret プロパティは、構成要素のプロパティから 1 つ、2 つ、3 つの値として指定します。値は任意の順序で指定可能で、省略された値は初期値に設定します。
値
caret-color-
キャレットの色を設定します。
caret-animation-
キャレットが点滅するかどうかを制御します。
caret-shape-
キャレットの視覚的な形状を設定します。
解説
caret 一括設定により、挿入位置を示すキャレットのプロパティを単一の宣言で設定することができるため、挿入位置のキャレットの外観と動作を完全に独自のカスタマイズすることができます。
値の解決
一括指定で値が除外された場合は、初期値にリセットされます。
caret-color:auto（currentColorに解決）caret-animation:auto（キャレットが点滅する）caret-shape:auto（ブラウザーが定義した形状）
順序の独立
一部の CSS 一括指定とは異なり、caret プロパティは値を任意の順序で受け入れます。ブラウザーは値の型に基づいて、どの値がどのプロパティに適用されるかを決定します。
<color>の値はcaret-colorに適用されます。auto/manualのキーワードはcaret-animationに適用されます。- 形状のキーワード (
bar,block,underscore) はcaret-shapeに適用されます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | elementsThatAcceptInput |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
例
アニメーションキャレットのあるレトロなターミナル
この例では、caret 一括指定を使用して複数のキャレットプロパティを組み合わせ、古いボーダーベースの手法を置き換える方法を示すヴィンテージ風ターミナルインターフェイスを作成します。
caret 一括指定の主な利点は、複数のプロパティを 1 つの宣言で組み合わせられることです。ここでは形状を block に設定し、デフォルトの点滅を無効化し、色を green に設定する、これらすべてを 1 行で実現しています。
HTML
html
<label for="terminal">コマンドを入力</label>
<div class="old-screen">
<span>></span>
<textarea id="terminal" class="terminal-input"></textarea>
</div>
CSS
css
.terminal-input {
caret: block manual green;
animation: vintage-caret 2s infinite;
}
@keyframes vintage-caret {
0%,
50% {
caret-color: #00ad00;
}
75%,
100% {
caret-color: transparent;
}
}