Vaktform - CSS-tricks

Anonim

Den caret-shapeegendom i CSS ändrar formen på textmarkören inne redigerbara element som indikerar en användare skriver. Det är en del av CSS Basic User Interfaces Module Level 4, som för närvarande är i Working Draft-status.

När jag skriver är vagnen det lilla blinkande fältet som följer varje tecken jag skriver.

Vi kan använda för caret-shapeatt ändra den stapeln till något annat som, säg, ett block:

.element ( caret-shape: block; )

Det kommer att producera en vakt som är mer som vad du kan se när du skriver in kommandoraden:

Syntax

caret-shape: auto | bar | block | underscore
  • Ursprungligt värde: auto
  • Gäller för: element som accepterar inmatning
  • Ärvt: ja
  • Procentandelar: ej tillämpligt
  • Beräknat värde: specificerat nyckelord
  • Animationstyp: efter beräknat värde

Värden

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

Vi har för caret-shapenärvarande inte mycket webbläsarstöd (se nedan), men här är en återgivning av dessa värden.

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

Webbläsarstöd

Det ser inte ut som om någon data finns tillgänglig i Caniuse, men med några snabba test är det här jag hittade:

IE Kant Firefox Krom Safari Opera
Nej Nej Nej Nej Nej Allt
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
Nej Nej Nej Nej Nej

Vi kan "fejka" detta

Medan webbläsarstöd är vad det är kan vi faktiskt replikera effekten med annan CSS-magi.

Det är den typen av saker som används på denna skrivmaskinanimation:

Mer information

  • CSS Basic User Interface Module Level 4 (Working Draft)

Relaterade egenskaper

Almanack den 27 januari 2021

markör

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