Caret-Form - CSS-Tricks

Anonim

Die caret-shapeEigenschaft in CSS ändert die Form des Textcursors in bearbeitbaren Elementen, die darauf hinweisen, dass ein Benutzer tippt. Es ist Teil des CSS Basic User Interfaces Module Level 4, das sich derzeit im Status "Working Draft" befindet.

Während ich schreibe, ist das Caret der kleine blinkende Balken, der jedem von mir eingegebenen Zeichen folgt.

Wir können caret-shapediesen Balken in etwas anderes ändern, beispielsweise einen Block:

.element ( caret-shape: block; )

Dadurch wird ein Caret erstellt, das eher dem entspricht, was Sie möglicherweise sehen, wenn Sie in die Befehlszeile eingeben:

Syntax

caret-shape: auto | bar | block | underscore
  • Ursprünglicher Wert: auto
  • Gilt für: Elemente, die Eingaben akzeptieren
  • Geerbt: ja
  • Prozentsätze: n / a
  • Berechneter Wert: angegebenes Schlüsselwort
  • Animationstyp: nach berechnetem Wert

Werte

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

Wir haben caret-shapemomentan nicht viel Browserunterstützung (siehe unten), aber hier ist eine Darstellung dieser Werte.

caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

Browser-Unterstützung

Es sieht nicht so aus, als wären Daten in Caniuse verfügbar, aber mit einigen schnellen Tests habe ich Folgendes gefunden:

IE Kante Feuerfuchs Chrom Safari Oper
Nein Nein Nein Nein Nein Alle
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
Nein Nein Nein Nein Nein

Wir können das „vortäuschen“

Während Browserunterstützung das ist, was sie ist, können wir den Effekt tatsächlich mit anderer CSS-Magie replizieren.

So etwas wird in dieser Schreibmaschinenanimation verwendet:

Mehr Informationen

  • CSS Basic User Interface Modul Stufe 4 (Arbeitsentwurf)

Verwandte Eigenschaften

Almanach am 27. Januar 2021

Caret

.element ( caret: #ff7a18 underscore; ) Chris Coyier