caret-color CSS property

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

Syntax

/* 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

Diese Eigenschaft wird als ein <color>-Wert oder das Schlüsselwort auto angegeben.

auto

Löst sich im Allgemeinen zu currentColor auf, also der color des Textes, der verändert wird.

<color>

Die Farbe des Carets.

Beschreibung

Ein Einfüge-Caret ist ein sichtbarer Indikator der Stelle im bearbeitbaren Text — oder innerhalb eines Elements, das Texteingaben akzeptiert — an der der Benutzer Inhalt einfügen (oder löschen) wird. Der Caret ist typischerweise eine dünne vertikale Linie, die anzeigt, wo das Hinzufügen oder Löschen von Zeichen erfolgen wird. Er blinkt allgemein (blitzt auf und ab), damit er besser sichtbar ist. Der Caret erscheint nur, wenn das bearbeitbare Element den Fokus hat. Standardmäßig hat dieser Caret die Farbe des Textes. Die caret-color-Eigenschaft kann verwendet werden, um die Farbe dieses Carets auf eine andere Farbe als die currentColor einzustellen oder um einen farbigen Caret auf seine Standardeinstellung zurückzusetzen.

Der auto-Wert setzt das Einfüge-Caret auf currentColor, was der color des Textes ist, der hinzugefügt oder gelöscht wird. Benutzeragenten können eine andere Farbe wählen, um eine gute Sichtbarkeit und Kontrast zum umgebenden Inhalt sicherzustellen, indem sie die color, background-color, Schatten und andere Faktoren berücksichtigen. In der Praxis verwenden jedoch alle Browser standardmäßig die aktuelle Farbe, und wenn caret-color auf auto gesetzt ist. Sie können jeden gültigen <color> als Wert festlegen.

Einfüge-Carets verstehen

Das Einfüge-Caret und damit diese Eigenschaft gilt nur für Text oder Elemente, die Texteingaben akzeptieren können. Der Caret erscheint in fokussierten Benutzerschnittstellenelementen, in denen Benutzer Inhalte aktualisieren können, wie z.B. <input>-Elemente, die Freiform-Text akzeptieren, das <textarea>-Element und Elemente mit dem contenteditable Attribut.

Das Caret kann in <input>-Elementen der Typen password, text, search, tel und email erscheinen. Es gibt kein Caret in den Eingabetypen Datum, color, hidden, radio oder checkbox. Einige Browser zeigen ein Caret mit dem Eingabetyp number an. In einigen Browsern ist es möglich, ein Caret in Elementen erscheinen zu lassen, die nie Textinhalt haben — zum Beispiel, indem man appearance: none setzt und das contenteditable-Attribut hinzufügt. Dies wird jedoch nicht empfohlen.

Ein Caret kann in einem bearbeitbaren Element oder seinen Nachkommen angezeigt werden, vorausgesetzt, die Bearbeitbarkeit ist nicht deaktiviert, zum Beispiel indem das contentEditable-Attribut eines nachrangigen Elements auf false gesetzt wird. Wenn ein Element nicht bearbeitbar oder auswählbar ist, zum Beispiel wenn user-select auf none gesetzt ist, sollte der Caret nicht erscheinen.

Caret versus Cursor

Es gibt mehrere Arten von Carets. Das Einfüge-Caret ist der einzige Typ, der von der caret-color-Eigenschaft beeinflusst wird.

Viele Browser verfügen über ein Navigations-Caret, das ähnlich wie ein Einfüge-Caret funktioniert, sich jedoch in nicht bearbeitbarem Text bewegen lässt.

Das Mauszeigerbild, das bei bestimmten cursor Eigenschaftswerten angezeigt wird (zum Beispiel auto oder text), kann einem Caret ähneln, ist aber keines. Es handelt sich um einen Cursor.

Animationen von auto

Im Allgemeinen, wenn die caret-color auf auto gesetzt ist oder standardmäßig auto ist, verwenden Benutzeragenten currentColor, das animierbar ist. Auto ist jedoch standardmäßig kein animierbarer Wert: Beim Animieren oder Überblenden der caret-color von auto auf einen beliebigen Farbwert erfolgt keine Interpolation. Die Animation ist diskret; die Farbe wechselt vom oder zum currentColor in der Mitte der animation-duration oder transition-duration.

Formale Definition

Formale Syntax

caret-color = 
  auto                         |
  <color> [ auto | <color> ]?  

Beispiele

Einstellung einer benutzerdefinierten Caret-Farbe

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

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

input.custom {
  caret-color: orange;
}

p.custom {
  caret-color: green;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• caret-animation, caret-shape
• caret Kurzschreibweise
• color
• text-emphasis
• cursor
• text-emphasis
• CSS <color> Datentyp
• <input> Element
• HTML contenteditable Attribut