CSS-Eigenschaft caret-color

Die Eigenschaft caret-color definiert die Farbe des Cursors für die Einfügung. Es ist eine dünne vertikale Linie, die standardmäßig schwarz ist. Diese Eigenschaft ermöglicht es, jede beliebige Farbe auf die Einfügemarke anzuwenden.

Anfangswert auto
Gilt für Alle Elemente
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax object.style.caretColor = "#1c87c9";

Syntax

caret-color: auto | color;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .caret-example1 {
      caret-color: transparent;
      }
      .caret-example2 {
      caret-color: #1c87c9 ;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft caret-color</h2>
    <input value="Default caret color"><br><br>
    <input class="caret-example1" value="Transparent caret color"><br><br>
    <input class="caret-example2" value="Custom caret color">
  </body>
</html>

Werte

Wert Beschreibung
auto Es stellt die aktuelle Farbe des Textes ein. Das ist der Standardwert.
color Es definiert die Farbe von caret.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
57.0+ 53.0+ 11.1+ 44.0+

Übe dein Wissen

Was ist die Eigenschaft 'caret-color' in CSS?
Finden Sie das nützlich?