caret-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die caret-color CSS Eigenschaft legt die Farbe des Einfüge-Carets fest, des sichtbaren Markers, an dem das nächste getippte Zeichen eingefügt wird. Dies wird manchmal als Texteingabe-Cursor bezeichnet. Das Caret erscheint in Elementen wie <input> oder solchen mit dem contenteditable Attribut. Das Caret ist typischerweise eine dünne vertikale Linie, die blinkt, um es besser erkennbar zu machen. Standardmäßig ist es schwarz, aber seine Farbe kann mit dieser Eigenschaft geändert werden.

Probieren Sie es aus

Beachten Sie, dass das Einfüge-Caret nur eine Art von Caret ist. Beispielsweise haben viele Browser ein "Navigations-Caret", das ähnlich wie ein Einfüge-Caret funktioniert, jedoch in nicht editierbarem Text verschoben werden kann. Andererseits ist das Mauszeiger-Symbol, das angezeigt wird, wenn Sie über Text schweben, wo die cursor Eigenschaft auto ist, oder wenn Sie über ein Element schweben, bei dem die cursor Eigenschaft text oder vertical-text ist, obwohl es manchmal wie ein Caret aussieht, kein Caret (es ist ein Cursor).

Syntax

css
/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

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

Werte

auto

Der Benutzeragent wählt eine geeignete Farbe für das Caret aus. Dies ist im Allgemeinen currentcolor, aber der Benutzeragent kann eine andere Farbe wählen, um eine gute Sichtbarkeit und Kontrast mit dem umgebenden Inhalt sicherzustellen, unter Berücksichtigung des Werts von currentcolor, des Hintergrunds, von Schatten und anderen Faktoren.

Hinweis: Während Benutzeragenten currentcolor (das normalerweise animierbar ist) für den auto Wert verwenden können, wird auto in Übergängen und Animationen nicht interpoliert.

<color>

Die Farbe des Carets.

Formale Definition

Initialer Wertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertauto wird wie angegeben berechnet und <color> Werte werden wie für die color Eigenschaft berechnet.
AnimationstypFarbe

Formale Syntax

caret-color = 
  auto     |
  <color>

Beispiele

Festlegen einer benutzerdefinierten Caret-Farbe

HTML

html
<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>

CSS

css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# caret-color

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch