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 Eingabescheitels fest, des sichtbaren Markers, an dem das nächste eingegebene Zeichen eingefügt wird. Dies wird manchmal als Text-Eingabecursor bezeichnet. Der Scheitel erscheint in Elementen wie <input> oder solchen mit dem contenteditable Attribut. Der Scheitel ist typischerweise eine dünne vertikale Linie, die blinkt, um auffälliger zu sein. Standardmäßig ist er schwarz, aber seine Farbe kann mit dieser Eigenschaft geändert werden.

Probieren Sie es aus

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

#example-element {
  font-size: 1.2rem;
}

Beachten Sie, dass der Eingabescheitel nur eine Art von Scheitel ist. Zum Beispiel haben viele Browser einen "Navigationsscheitel", der ähnlich wie ein Eingabescheitel funktioniert, jedoch in nicht editierbarem Text bewegt werden kann. Das Mauszeigerbild, das beim Überfahren von Text angezeigt wird, bei dem die cursor Eigenschaft auf auto steht, oder beim Überfahren eines Elements, bei dem die cursor Eigenschaft auf text oder vertical-text steht, ist zwar manchmal ähnlich einem Scheitel, jedoch kein Scheitel (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 User-Agent wählt eine passende Farbe für den Scheitel. Dies ist im Allgemeinen currentcolor, aber der User-Agent kann eine andere Farbe wählen, um eine gute Sichtbarkeit und Kontrast mit dem umliegenden Inhalt zu gewährleisten, wobei der Wert von currentcolor, der Hintergrund, Schatten und andere Faktoren berücksichtigt werden.

Hinweis: Während User-Agents currentcolor (was normalerweise animierbar ist) für den Wert auto verwenden können, wird auto bei Übergängen und Animationen nicht interpoliert.

<color>

Die Farbe des Scheitels.

Formale Definition

Anfangswertauto
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 Scheitelfarbe

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

Siehe auch