caret

caret in CSS ist eine Kurzschreibweise, die die Eigenschaften caret-color und caret-shape in einer einzigen Deklaration kombiniert. So können wir dies schreiben

.element {
  caret: #ff7a18 underscore;
}

…was dem Schreiben von diesem entspricht

.element {
  caret-color: #ff7a18;
  caret-shape: underscore;
}

Das ist eine nette Abkürzung, wenn Sie die Farbe und Form eines Carets ändern möchten. Und was ist ein Caret, fragen Sie? Wahrscheinlich kennen Sie ihn am besten, wenn Sie in ein bearbeitbares Element wie ein Texteingabefeld oder ein Textarea eingeben. Ich schreibe diesen Beitrag in WordPress, das im Grunde ein riesiges Formularfeld ist, und das ist der Caret, der mich blinkend anblickt

Wenn wir also caret-color auf z. B. #ff7a18 und caret-shape auf etwas wie underscore setzen, könnten wir etwas wie das hier erwarten

Syntax

caret: <'caret-color'> || <'caret-shape'>

Die Syntax kann einen Wert oder einen anderen… oder beides! Wenn ein Wert leer ist, wird sein Anfangswert verwendet, der für beide Bestandteile auto ist.

• Initial: auto
• Gilt für: Elemente, die Eingaben akzeptieren
• Vererbt: ja
• Prozentwerte: n/v
• 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

Derzeit keine. Die Eigenschaft ist ursprünglich in der CSS Basic User Interface Module Level 4 specification definiert, die sich derzeit im Entwurfsstadium befindet. Das bedeutet, dass es noch Raum für Änderungen gibt, bis sie als Empfehlung für Browser zur Implementierung wird.

In der Zwischenzeit können wir die caret-Eigenschaft mit etwas anderem CSS-Zauber „nachahmen“.

Verwandte Eigenschaften