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

auto

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

<color>

Die Farbe des Carets.

Beschreibung

Ein Einfüge-Caret ist ein sichtbarer Indikator der Stelle innerhalb von bearbeitbarem Text — oder innerhalb eines Elements, das Texteingabe akzeptiert — an der Inhalte vom Benutzer eingefügt (oder gelöscht) werden. Das Caret ist typischerweise eine dünne vertikale Linie, die anzeigt, wo das Hinzufügen oder Löschen von Zeichen geschehen wird. Es blinkt normalerweise (flackert ein und aus), damit es besser auffällt. Das Caret erscheint nur, wenn das bearbeitbare Element den Fokus hat. Standardmäßig hat dieses Caret die Farbe des Textes. Die caret-color-Eigenschaft kann verwendet werden, um die Farbe dieses Carets auf etwas anderes als currentColor zu setzen oder ein gefärbtes Caret auf seinen Standard 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, wobei color, background-color, Schatten und andere Faktoren berücksichtigt werden. In der Praxis verwenden jedoch alle Browser die aktuelle Farbe standardmäßig, und wenn caret-color auf auto gesetzt ist. Sie können jeden gültigen <color> als Wert setzen.

Verständnis von Einfüge-Carets

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

Das Caret kann in <input>-Elementen des Typs password, text, search, tel und email erscheinen. Kein Caret existiert bei Datum-, color-, hidden-, radio- oder checkbox-Eingabetypen. Einige Browser zeigen ein Caret beim number-Eingabetyp an. Es ist in einigen Browsern möglich, ein Caret in Elementen erscheinen zu lassen, die normalerweise keinen Textinhalt haben — zum Beispiel durch das Setzen von appearance: none und hinzufügen des contenteditable-Attributs. Dies wird jedoch nicht empfohlen.

Ein Caret kann in einem bearbeitbaren Element oder seinen Nachfahren angezeigt werden, vorausgesetzt, die Bearbeitbarkeit ist nicht deaktiviert, zum Beispiel durch das Setzen des contentEditable-Attributs eines Nachfahrelements auf false. Wenn ein Element nicht bearbeitbar oder auswählbar ist, z.B. wenn user-select auf none gesetzt ist, sollte das Caret nicht erscheinen.

Caret versus Cursor

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

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

Das Mauszeigerbild, das für bestimmte Werte der cursor-Eigenschaft angezeigt wird (z.B. auto oder text), kann einem Caret ähneln, ist aber keines. Es ist ein Cursor.

Animation von auto

Im Allgemeinen verwenden Benutzeragenten, wenn die caret-color auf auto gesetzt ist oder sich dazu standardmäßig verhält, currentColor, das animiert werden kann. auto ist jedoch standardmäßig kein animierbarer Wert: Beim Animieren oder Überblenden der caret-color von auto zu einem beliebigen Farbwert erfolgt keine Interpolation. Die Animation ist diskret; die Farbe wechselt zu oder von der currentColor-Farbe in der Mitte der animation-duration oder transition-duration.

Formale Definition

Formale Syntax

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

Beispiele

Setzen 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 Shorthand
• color
• text-emphasis
• cursor
• text-emphasis
• CSS <color> Datentyp
• <input> Element
• HTML contenteditable Attribut