caret-shape

Probieren Sie es aus

caret-shape: auto;

caret-shape: bar;

caret-shape: block;

caret-shape: underscore;

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

Syntax

/* Keyword values */
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

/* Global values */
caret-shape: inherit;
caret-shape: initial;
caret-shape: revert;
caret-shape: revert-layer;
caret-shape: unset;

Werte

auto

Der Standardwert. Der Browser bestimmt die Form des Carets. Dies folgt in der Regel den Plattformkonventionen und kann sich je nach Kontext ändern.

bar

Das Caret erscheint als dünne vertikale Linie an der Einfügestelle, zwischen den Zeichen positioniert anstatt über ihnen.

block

Das Caret erscheint als Rechteck, das das nächste Zeichen nach der Einfügestelle überlappt. Wenn kein Zeichen folgt, erscheint es nach dem letzten Zeichen.

underscore

Das Caret erscheint als dünne horizontale Linie unter dem nächsten Zeichen nach der Einfügestelle. Wenn kein Zeichen folgt, erscheint es nach dem letzten Zeichen.

Beschreibung

Das Einfüge-Caret ist der blinkende Cursor, der anzeigt, wo Text beim Tippen eingefügt wird. Unterschiedliche Caret-Formen können visuelles Feedback über den aktuellen Bearbeitungsmodus geben oder eine visuelle Anpassung bieten.

Bearbeitungsmodi und Caret-Formen

Texteditoren arbeiten typischerweise in einem von zwei Modi:

• Einfügemodus: Neue Zeichen werden an der Caret-Position eingefügt und bestehender Text wird ans Ende der Zeile verschoben. Dies ist das Standardverhalten in den meisten modernen Anwendungen.
• Überschreibmodus (auch "Obertippmodus" genannt): Neue Zeichen ersetzen die bestehenden Zeichen an der Caret-Position, anstatt zwischen ihnen eingefügt zu werden. Dieser Modus wird oft mit der Einfg-Taste umgeschaltet.

Verschiedene Caret-Formen haben traditionelle Verwendungen, zum Beispiel:

• Strich-Carets sind zwischen Zeichen positioniert und in modernen Schnittstellen am häufigsten.
• Block-Carets überlagern das nächste Zeichen und werden häufig in Terminalanwendungen oder zur Anzeige des Überschreibmodus verwendet.
• Unterstrich-Carets erscheinen unter Zeichen und können für bestimmte Designästhetiken nützlich sein, wie das Nachahmen von Schreibmaschinenstilen oder unterstrichenem Texteingabestil.

Positionierung und Verhalten des Carets

Die Eigenschaft caret-shape beeinflusst, wie das Caret visuell dargestellt wird, ändert jedoch nicht seine logische Position im Text. Das Caret repräsentiert immer den Einfügepunkt zwischen Zeichen, unabhängig von seiner visuellen Form.

Interaktion mit Schreibmodi

Die Caret-Form passt sich dem writing-mode des Textes an. In vertikalen Schreibmodi werden Strich-Carets horizontal, und Unterstrich-Carets positionieren sich entsprechend gemäß der Textausrichtung.

Formale Definition

Formale Syntax

caret-shape = 
  auto        |
  bar         |
  block       |
  underscore  

Beispiele

Retro-Terminal mit animiertem Caret

Dieses Beispiel zeigt, wie man eine Vintage-Terminal-Oberfläche mit caret-shape: block und animierter Caret-Farbe erstellt, wobei die alte Technik der Verwendung von Rändern ersetzt wird.

Der wichtigste Teil ist die Verwendung der modernen Caret-Eigenschaften anstelle der alten randbasierten Technik. Wir setzen das Caret auf Blockform, deaktivieren das standardmäßige Blinken und erstellen unsere eigene benutzerdefinierte Animation.

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

.terminal-input {
  caret-shape: block;
  caret-animation: manual;
  animation: old-caret 2s infinite;
}

@keyframes old-caret {
  0%,
  50% {
    caret-color: #00ad00;
  }
  75%,
  100% {
    caret-color: transparent;
  }
}

Ergebnis

Konsolenoberfläche mit Unterstrich-Caret

Dieses Beispiel demonstriert die Verwendung von caret-shape: underscore, um eine Konsolenstil-Oberfläche zu erstellen, bei der das Unterstrich-Caret die Terminalästhetik ergänzt.

HTML

<label for="console">Enter a command</label>
<div class="console-demo">
  <div class="console-output">
    <p>user@host:css-ui-4 $ ls -a</p>
    <p>. .. Overview.bs Overview.html</p>
  </div>
  <div class="console-input">
    <span class="prompt">user@host:css-ui-4 $ </span>
    <input type="text" id="console" class="console" value="cd" />
  </div>
</div>

CSS

label {
  background: #2a2a2c;
  color: white;
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  font-family: monospace;
}

.console-demo {
  background: black;
  color: white;
  font-family: monospace;
  padding: 10px 20px;
  height: 60px;
}

.console-output {
  margin-bottom: 0.5rem;
}

.console-output p {
  margin: 0 0.25rem;
}

.console-input {
  display: flex;
  align-items: center;
}

.prompt {
  margin-right: 0;
}

.console {
  background: transparent;
  border: none;
  color: white;
  padding-left: 1ch;
  font-family: inherit;
  outline: none;
  flex: 1;
}

.console {
  caret-shape: underscore;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• caret-color, caret-animation
• caret Kurzform
• CSS grundlegendes Benutzeroberflächenmodul