CSS caret-color Eigenschaft
Die CSS-Eigenschaft caret-color legt die Farbe des Cursors fest. Entdecken Sie Beispiele und Details zu dieser Eigenschaft.
Die CSS-Eigenschaft caret-color legt die Farbe des Einfügecursors fest — der dünnen, blinkenden senkrechten Linie, die anzeigt, wo eingetippter Text in einem Textfeld oder einem beliebigen bearbeitbaren Element erscheint. Standardmäßig übernimmt der Cursor die Textfarbe des Benutzeragenten (in der Regel Schwarz). Mit caret-color können Sie ihn einfärben, um Ihrer Marke zu entsprechen, den Kontrast gegenüber einem farbigen Eingabehintergrund zu verbessern oder ihn vollständig auszublenden.
Der Cursor ist ausschließlich ein Tippindikator. Er ist nicht identisch mit dem Mauszeiger (der über die Eigenschaft cursor gesteuert wird) und er beeinflusst nicht die Farbe der Textmarkierung.
Diese Seite erläutert, was caret-color bewirkt, wo sie angewendet wird, welche Werte sie akzeptiert und auf welche Besonderheiten Sie vor dem Einsatz achten sollten.
| Anfangswert | auto |
|---|---|
| Gilt für | Elemente, die Texteingaben akzeptieren. |
| Vererbbar | Ja. |
| Animierbar | Ja (als Farbe). |
| Version | CSS3 |
| DOM-Syntax | object.style.caretColor = "#1c87c9"; |
Anwendungsbereiche von caret-color
Der Cursor erscheint überall dort, wo der Benutzer Text eingeben oder einen Textbearbeitungscursor positionieren kann. caret-color wirkt sich daher auf folgende Elemente aus:
<input>-Felder, die Text akzeptieren (text,search,email,url,password,tel,number).<textarea>-Elemente.- Jedes Element mit dem auf
truegesetzten Attributcontenteditable.
Da die Eigenschaft vererbt wird, können Sie sie einmal an einem Container (oder am :root) setzen, und alle bearbeitbaren Nachfahren übernehmen sie automatisch — praktisch für das Theming eines gesamten Formulars mit einer einzigen Regel.
Syntax
caret-color: auto | <color>;Beispiel: transparenter vs. benutzerdefinierter Cursor
Das erste Eingabefeld behält den Standard-Cursor, das zweite blendet seinen Cursor mit transparent aus, und das dritte verwendet ein benutzerdefiniertes Blau:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.caret-example1 {
caret-color: transparent;
}
.caret-example2 {
caret-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Caret-color property example</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 | Der Browser wählt eine geeignete Farbe, in der Regel currentColor (die Textfarbe des Elements). Dies ist der Standardwert. |
<color> | Jede gültige CSS-Farbe: ein benannter Farbname, Hex (#1c87c9), rgb()/rgba() oder hsl()/hsla(). Mit transparent wird der Cursor ausgeblendet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert (auto) zurück. |
| inherit | Übernimmt den berechneten Wert des übergeordneten Elements. |
Jedes Farbformat ist gültig, sodass die folgenden Angaben alle korrekt sind:
caret-color: red; /* named color */
caret-color: #1c87c9; /* hex */
caret-color: rgb(28 135 201);/* rgb */
caret-color: hsl(202 76% 45%);/* hsl */
caret-color: transparent; /* invisible caret */Die vollständige Liste der Schlüsselwörter finden Sie unter CSS-Farbnamen; wie currentColor aufgelöst wird, erläutert die Eigenschaft color.
Besonderheiten und Tipps
autowird zucurrentColoraufgelöst. Wenn Sie nur die Textfarbe (color) ändern, folgt der Cursor ihr automatisch — in den meisten Fällen benötigen Siecaret-colornur dann, wenn der Cursor sich von der Textfarbe unterscheiden soll.transparentblendet den Cursor aus, ohne die Bearbeitung zu deaktivieren. Das Feld nimmt weiterhin Eingaben entgegen; nur der blinkende Indikator verschwindet. Vermeiden Sie dies bei echten Formularen — ein unsichtbarer Cursor beeinträchtigt Usability und Barrierefreiheit.- Keine Wirkung auf nicht bearbeitbare Elemente. Das Setzen von
caret-colorauf ein<div>ohnecontenteditableoder auf ein deaktiviertes/schreibgeschütztes Eingabefeld hat keinen Effekt, da dort kein Cursor gezeichnet wird. - Achten Sie auf den Kontrast. Ein Cursor, der sich in einem dunklen Eingabehintergrund verliert, kann schwer zu finden sein. Wählen Sie eine Farbe, die auffällt — genau wie beim Textkontrast.
- Er ist animierbar. Da der Wert eine Farbe ist, können Sie ihn mit einer Transition versehen — beispielsweise kann der Cursor in eine Hervorhebungsfarbe übergehen, wenn ein Eingabefeld den Fokus erhält.
input {
caret-color: #999;
transition: caret-color 0.2s ease;
}
input:focus {
caret-color: #1c87c9;
}Browser-Unterstützung
caret-color wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari und Opera). Der Rückfall ist problemlos: Browser, die die Eigenschaft nicht kennen, zeigen einfach den Standard-Cursor an — es schadet also nicht, sie ohne Fallback einzusetzen.
Verwandte Eigenschaften
color— Textfarbe und Quelle voncurrentColor, auf diecaret-color: autozurückfällt.outline-color— Farbe des Fokusrahmens, der häufig neben einem aktiven Eingabefeld angezeigt wird.opacity— ein Element einschließlich seines Cursors ausblenden.