Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 legt das Erscheinungsbild und das Verhalten des Einfüge-Carets in einer einzigen 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;
}

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

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;

Die caret-Eigenschaft wird als ein, zwei oder drei Werte aus den Bestandteileigenschaften angegeben. Werte können in beliebiger Reihenfolge angegeben werden, und nicht angegebene Werte werden auf ihre Initialwerte gesetzt.

Werte

caret-color

Legt die Farbe des Carets fest.

caret-animation

Bestimmt, ob das Caret blinkt.

caret-shape

Legt die visuelle Form des Carets fest.

Beschreibung

Die caret-Kurzform ermöglicht es Ihnen, mehrere Caret-Eigenschaften in einer einzigen Deklaration festzulegen, was es bequem macht, das vollständige Erscheinungsbild und Verhalten des Einfüge-Carets anzupassen.

Wertauflösung

Wenn Werte in der Kurzform weggelassen werden, werden sie auf ihre Initialwerte zurückgesetzt:

  • caret-color: auto (löst sich in currentColor auf).
  • caret-animation: auto (Caret blinkt).
  • caret-shape: auto (vom Browser bestimmte Form).

Unabhängigkeit der Reihenfolge

Im Gegensatz zu einigen CSS-Kurzformen akzeptiert die caret-Eigenschaft Werte in beliebiger Reihenfolge. Der Browser bestimmt, welcher Wert auf welche Eigenschaft angewendet wird, basierend auf dem Werttyp:

  • <color> Werte gelten für caret-color.
  • auto/manual Schlüsselwörter gelten für caret-animation.
  • Formschlüsselwörter (bar, block, underscore) gelten für caret-shape.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufelementsThatAcceptInput
VererbtJa
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • caret-color: auto wird wie angegeben berechnet und <color> Werte werden wie für die color Eigenschaft berechnet.
  • caret-shape: wie angegeben
Animationstypwie 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 Caret

Dieses Beispiel erstellt eine Vintage-Terminalschnittstelle unter Verwendung der caret-Kurzform zur Kombination mehrerer Caret-Eigenschaften und zeigt, wie sie ältere, auf Rahmen basierende Techniken ersetzt.

Der Hauptvorteil der caret-Kurzform 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 green, alles in einer Zeile.

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;
  }
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# propdef-caret-animation
CSS Basic User Interface Module Level 4
# valdef-caret-animation-auto
CSS Basic User Interface Module Level 4
# valdef-caret-shape-auto
CSS Basic User Interface Module Level 4
# valdef-caret-shape-block
CSS Basic User Interface Module Level 4
# propdef-caret-shape
CSS Basic User Interface Module Level 4
# valdef-caret-shape-bar
CSS Basic User Interface Module Level 4
# valdef-caret-animation-manual
CSS Basic User Interface Module Level 4
# caret-color
CSS Basic User Interface Module Level 4
# valdef-caret-shape-underscore

Browser-Kompatibilität

Siehe auch