caret
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 setzt das Erscheinungsbild und Verhalten des Eingabecursors in einer einzigen Deklaration.
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;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform 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 ein, zwei oder drei Werte aus den Bestandteileigenschaften angegeben. Werte können in beliebiger Reihenfolge angegeben werden, und ausgelassene Werte werden auf ihre Anfangswerte gesetzt.
Werte
caret-color-
Setzt die Farbe des Cursors.
caret-animation-
Kontrolliert, ob der Cursor blinkt.
caret-shape-
Setzt die visuelle Form des Cursors.
Beschreibung
Die caret-Shorthand erlaubt es, mehrere Cursoreigenschaften in einer einzigen Deklaration zu setzen, was es bequem macht, das komplette Erscheinungsbild und Verhalten des Eingabecursors anzupassen.
Werteresolution
Wenn Werte aus der Shorthand weggelassen werden, setzen sie sich auf ihre Anfangswerte zurück:
caret-color:auto(löst sich zucurrentColorauf).caret-animation:auto(Cursor blinkt).caret-shape:auto(Browser-determinierte Form).
Unabhängigkeit der Reihenfolge
Anders als einige 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.auto/manual-Schlüsselwörter gelten fürcaret-animation.- Form-Schlüsselwörter (
bar,block,underscore) gelten fürcaret-shape.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | elementsThatAcceptInput |
| 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>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Beispiele
Retro-Terminal mit animiertem Cursor
Dieses Beispiel erstellt eine Vintage-Terminal-Oberfläche mit der caret-Shorthand, um mehrere Cursoreigenschaften zu kombinieren, und demonstriert, wie sie ältere, auf Grenzen basierende Techniken ersetzt.
Der Hauptvorteil der caret-Shorthand ist die Kombination mehrerer Eigenschaften in einer Deklaration. Hier setzen wir die Form auf block, deaktivieren das standardmäßige Blinken und setzen die Farbe auf green, alles in einer einzigen 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;
}
}