caret
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Thuộc tính viết tắt caret trong CSS đặt giao diện và hành vi của con trỏ chèn trong một khai báo duy nhất.
Try it
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;
}
Thuộc tính thành phần
Thuộc tính này là viết tắt của các thuộc tính CSS sau:
Cú pháp
/* Giá trị đơn lẻ */
caret: red; /* chỉ caret-color */
caret: block; /* chỉ caret-shape */
caret: manual; /* chỉ caret-animation */
/* Hai giá trị */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Ba giá trị */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Giá trị toàn cục */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
Thuộc tính caret được chỉ định bằng một, hai hoặc ba giá trị từ các thuộc tính thành phần. Các giá trị có thể được chỉ định theo bất kỳ thứ tự nào, và các giá trị bị bỏ qua sẽ được đặt về giá trị ban đầu của chúng.
Giá trị
caret-color-
Đặt màu của con trỏ.
caret-animation-
Kiểm soát xem con trỏ có nhấp nháy hay không.
caret-shape-
Đặt hình dạng trực quan của con trỏ.
Mô tả
Thuộc tính viết tắt caret cho phép đặt nhiều thuộc tính con trỏ trong một khai báo duy nhất, giúp thuận tiện khi tùy chỉnh toàn bộ giao diện và hành vi của con trỏ chèn.
Phân giải giá trị
Khi các giá trị bị bỏ qua trong thuộc tính viết tắt, chúng sẽ được đặt lại về giá trị ban đầu:
caret-color:auto(phân giải thànhcurrentColor).caret-animation:auto(con trỏ nhấp nháy).caret-shape:auto(hình dạng do trình duyệt xác định).
Không phụ thuộc thứ tự
Không giống một số thuộc tính viết tắt CSS, thuộc tính caret nhận giá trị theo bất kỳ thứ tự nào. Trình duyệt xác định giá trị nào áp dụng cho thuộc tính nào dựa trên loại giá trị:
- Giá trị
<color>áp dụng chocaret-color. - Từ khóa
auto/manualáp dụng chocaret-animation. - Từ khóa hình dạng (
bar,block,underscore) áp dụng chocaret-shape.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | Text or elements that accept text input |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Cú pháp hình thức
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color> [ auto | <color> ]?
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Ví dụ
Màn hình terminal retro với con trỏ động
Ví dụ này tạo giao diện terminal cổ điển sử dụng thuộc tính viết tắt caret để kết hợp nhiều thuộc tính con trỏ, minh họa cách nó thay thế các kỹ thuật dựa trên border cũ.
Ưu điểm chính của thuộc tính viết tắt caret là kết hợp nhiều thuộc tính trong một khai báo. Ở đây chúng ta đặt hình dạng thành block, tắt hiệu ứng nhấp nháy mặc định và đặt màu thành green, tất cả trong một dòng.
HTML
<label for="terminal">Enter a command</label>
<div class="old-screen">
<span>></span>
<textarea id="terminal" class="terminal-input"></textarea>
</div>
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;
}
}