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 Verhalten des Eingabecarets 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;
}

Zusammengesetzte Eigenschaften

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 von den zusammengesetzten Eigenschaften angegeben. Werte können in beliebiger Reihenfolge spezifiziert werden, und ausgelassene Werte werden auf ihre Anfangswerte gesetzt.

Werte

caret-color: Legt die Farbe des Carets fest.
caret-animation: Bestimmt, ob der 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 bequemer macht, das komplette Erscheinungsbild und Verhalten des Eingabecarets anzupassen.

Wertauflösung

Wenn Werte in der Kurzform ausgelassen werden, setzen sie sich auf ihre Anfangswerte zurück:

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

Reihenfolgeunabhängigkeit

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 werden auf caret-color angewendet.
auto/manual Schlüsselwörter werden auf caret-animation angewendet.
Formschlüsselwörter (bar, block, underscore) werden auf caret-shape angewendet.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `caret-color`: `auto` `caret-shape`: `auto`
Anwendbar auf	elementsThatAcceptInput
Vererbt	Ja
Berechneter Wert	wie 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
Animationstyp	wie die jeweiligen Kurzschreibweisen: `caret-color`: Farbe `caret-shape`: by computed value type

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, um mehrere Caret-Eigenschaften zu kombinieren, und zeigt, wie sie ältere Techniken auf Basis von Rändern 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 einzigen 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

label {
  background: #092104;
  display: block;
  padding: 10px 20px;
  color: #00ad00;
  font-weight: bold;
  font-family: monospace;
}

.old-screen {
  background: repeating-linear-gradient(
    #092104,
    #092104 2px,
    #123208 2px,
    #123208 4px
  );
  height: 140px;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  font-family: monospace;
}

span {
  display: inline-block;
  padding: 2px 5px;
  color: #00ad00;
  font-weight: bold;
  margin-right: 8px;
}

.terminal-input {
  background: transparent;
  height: 100%;
  border: none;
  color: #00ad00;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  flex: 1;
  resize: none;
}

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 # valdef-caret-shape-underscore
CSS Basic User Interface Module Level 4 # valdef-caret-shape-bar
CSS Basic User Interface Module Level 4 # caret-color
CSS Basic User Interface Module Level 4 # valdef-caret-shape-block
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 # propdef-caret-shape
CSS Basic User Interface Module Level 4 # valdef-caret-animation-manual
CSS Basic User Interface Module Level 4 # propdef-caret-animation
CSS Color Module Level 4 # valdef-color-currentcolor
CSS Color Module Level 4 # valdef-color-transparent

Browser-Kompatibilität

Siehe auch

caret-color, caret-animation, caret-shape
CSS basic user interface Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden