caret CSS-Eigenschaft
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die caret Shorthand CSS-Eigenschaft legt das Erscheinungsbild und das Verhalten des Einfüge-Cursors in einer einzelnen Deklaration fest.
Probieren Sie es aus
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;
}
Bestandteile der Eigenschaft
Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:
Syntax
/* 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;
Die caret-Eigenschaft wird als einer, zwei oder drei Werte aus den Bestandeigenschaften angegeben. Die Werte können in beliebiger Reihenfolge angegeben werden und ausgelassene Werte werden auf ihre Initialwerte gesetzt.
Werte
caret-color-
Legt die Farbe des Cursors fest.
caret-animation-
Bestimmt, ob der Cursor blinkt.
caret-shape-
Legt die visuelle Form des Cursors fest.
Beschreibung
Die caret-Shorthand ermöglicht es Ihnen, mehrere Cursoreigenschaften in einer einzigen Deklaration festzulegen, was es bequem macht, das vollständige Erscheinungsbild und Verhalten des Einfüge-Cursors anzupassen.
Wertauflösung
Wenn Werte in der Shorthand weggelassen werden, setzen sie sich auf ihre Initialwerte zurück:
caret-color:auto(löst sich incurrentColorauf).caret-animation:auto(Cursor blinkt).caret-shape:auto(vom Browser bestimmte Form).
Unabhängigkeit der Reihenfolge
Im Gegensatz zu einigen CSS-Shorthands akzeptiert die caret-Eigenschaft Werte in beliebiger Reihenfolge. Der Browser bestimmt, welcher Wert auf welche Eigenschaft angewendet wird, basierend auf dem Wertetyp:
<color>-Werte gelten fürcaret-color.- Schlüsselwörter
auto/manualgelten fürcaret-animation. - Form-Schlüsselwörter (
bar,block,underscore) gelten fürcaret-shape.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | Text or elements that accept text input |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color> [ auto | <color> ]?
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Beispiele
Retro-Terminal mit animiertem Cursor
Dieses Beispiel erstellt eine Vintage-Terminaloberfläche mithilfe der caret-Shorthand, um mehrere Cursoreigenschaften zu kombinieren und zu zeigen, wie sie ältere auf Rahmeneffekten basierende Techniken ersetzt.
Der Hauptvorteil der caret-Shorthand besteht darin, mehrere Eigenschaften in einer Deklaration zu kombinieren. Hier setzen wir die Form auf block, deaktivieren das standardmäßige Blinken und setzen die Farbe auf grün, alles in einer Zeile.
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;
}
}