Caret-form - CSS-tricks

Anonim

Den caret-shapeejendom i CSS ændrer formen af tekstmarkøren inde redigerbare elementer, der angiver en bruger er at skrive. Det er en del af CSS Basic User Interfaces Module Level 4, som i øjeblikket er i Working Draft-status.

Mens jeg skriver, er caret den lille blinkende bjælke, der følger hvert tegn, jeg skriver.

Vi kan bruge caret-shapetil at ændre denne bjælke til noget andet som f.eks. En blok:

.element ( caret-shape: block; )

Det producerer et tegn, der mere ligner det, du måske ser, når du skriver i kommandolinjen:

Syntaks

caret-shape: auto | bar | block | underscore
  • Startværdi: auto
  • Gælder for: elementer, der accepterer input
  • Arvet: ja
  • Procentdele: ikke oplyst
  • Beregnet værdi: specificeret nøgleord
  • Animationstype: efter beregnet værdi

Værdier

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

Vi har ikke meget browserstøtte caret-shapei øjeblikket (se nedenfor), men her er en gengivelse af disse værdier.

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

Browsersupport

Det ser ikke ud til, at der er nogen data tilgængelige i Caniuse, men med nogle hurtige test er det her, jeg fandt:

IE Edge Firefox Chrome Safari Opera
Ingen Ingen Ingen Ingen Ingen Alle
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
Ingen Ingen Ingen Ingen Ingen

Vi kan "falske" dette

Mens browsersupport er, hvad det er, kan vi faktisk replikere effekten med anden CSS-magi.

Det er den slags ting, der bruges på denne skrivemaskine-animation:

Mere information

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

Relaterede egenskaber

Almanak den 27. januar 2021

caret

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