Caret - CSS-Tricks | CSS-Almanach 2025

caretin CSS ist eine Kurzform-Eigenschaft, die die Eigenschaften caret-colorund caret-shapein einer einzigen Deklaration kombiniert . Also können wir folgendes schreiben:

.element ( caret: #ff7a18 underscore; )

… Was dem Schreiben ähnelt:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Das ist eine schöne Abkürzung, wenn Sie die Farbe und Form eines Carets ändern möchten. Und was ist ein Caret, fragst du? Am bekanntesten ist es wahrscheinlich, wenn Sie eines in ein bearbeitbares Element wie eine Texteingabe oder einen Textbereich eingeben. Ich schreibe diesen Beitrag in WordPress, das im Grunde genommen ein riesiges Formularfeld ist, und dies ist das Caret, das mich anblinzelt:

Wenn wir caret-coloralso das to, sagen wir #ff7a18, und das caret-shapeto so etwas einstellen underscore, können wir erwarten, dass wir so etwas sehen:

Syntax

caret: ||

Die Syntax kann den einen oder anderen Wert annehmen ... oder beides! Wenn ein Wert leer ist, wird sein Anfangswert verwendet, der autofür beide Eigenschaften gilt.

Initiale: auto
Gilt für: Elemente, die Eingaben akzeptieren
Geerbt: ja
Prozentsätze: n / a
Berechneter Wert: siehe einzelne Eigenschaften
Animationstyp: nicht animierbar

Werte

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Browser-Unterstützung

Im Moment keine. Die Eigenschaft wird anfänglich in der Spezifikation des CSS Basic User Interface Module Level 4 definiert, die sich derzeit im Editor's Draft befindet. Das bedeutet, dass bis zu dem Zeitpunkt, an dem die Implementierung von Browsern empfohlen wird, noch Änderungen vorgenommen werden können.

In der Zwischenzeit können wir die caretEigenschaft mit etwas anderer CSS-Magie „fälschen“ .