Vaktform - CSS-triks

Anonim

Den caret-shapeegenskap i CSS endrer formen av skrivemerket inne redigerbar elementer som indikerer en bruker skriver. Det er en del av CSS Basic User Interfaces Module Level 4, som for tiden er i Working Draft-status.

Mens jeg skriver er stiften den lille blinkende linjen som følger hver karakter jeg skriver.

Vi kan bruke caret-shapetil å endre denne linjen til noe annet som for eksempel en blokk:

.element ( caret-shape: block; )

Det vil produsere et oppslag som ligner mer på det du kan se når du skriver inn kommandolinjen:

Syntaks

caret-shape: auto | bar | block | underscore
  • Opprinnelig verdi: auto
  • Gjelder: elementer som godtar innspill
  • Arvet: ja
  • Prosentandeler: ikke relevant
  • Beregnet verdi: spesifisert nøkkelord
  • Animasjonstype: etter beregnet verdi

Verdier

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

Vi har ikke mye nettleserstøtte for caret-shapeøyeblikket (se nedenfor), men her er en gjengivelse av disse verdiene.

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

Nettleserstøtte

Det ser ikke ut som om noen data er tilgjengelig i Caniuse, men med noen raske tester, her er det jeg fant:

DVS Kant Firefox Chrome Safari Opera
Nei Nei Nei Nei Nei Alle
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
Nei Nei Nei Nei Nei

Vi kan "falske" dette

Mens nettleserstøtte er hva det er, kan vi faktisk replikere effekten med annen CSS-magi.

Det er den slags ting som brukes på denne skrivemaskinanimasjonen:

Mer informasjon

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

Relaterte egenskaper

Almanakk 27. januar 2021

vaktmester

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