試一試
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">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Individual values */
caret: red; /* caret-color only */
caret: block; /* caret-shape only */
caret: manual; /* caret-animation only */
/* Two values */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Three values */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Global values */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
caret 屬性透過其組成屬性的一個、兩個或三個值來指定。值可以按任何順序指定，省略的值將設定為其初始值。
值
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。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 接受輸入的元素 |
| 繼承性 | 是 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
示例
帶有動畫插入符的復古終端
此示例使用 caret 簡寫屬性結合多個插入符屬性，建立一個復古終端介面，演示了它如何取代舊的基於邊框的技術。
caret 簡寫屬性的主要優點是在一個宣告中組合多個屬性。在這裡，我們將形狀設定為 block，停用預設閃爍，並將顏色設定為 green，所有這些都在一行中完成。
HTML
html
<label for="terminal">Enter a command</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;
}
}
結果
規範
瀏覽器相容性
載入中…