Oblik kareta - CSS-trikovi

Anonim

caret-shapeNekretnina u CSS mijenja oblik teksta pokazivača unutar uređivati elemenata koji ukazuje korisnik piše. Dio je CSS modula osnovnog korisničkog sučelja razine 4, koji je trenutno u statusu Working Draft.

Dok pišem, karata je mala trepćuća traka koja prati svaki znak koji upišem.

Tu caret-shapetraku možemo promijeniti u nešto drugo poput, recimo, bloka:

.element ( caret-shape: block; )

To će stvoriti karetu koja je sličnija onome što biste mogli vidjeti prilikom upisivanja u naredbeni redak:

Sintaksa

caret-shape: auto | bar | block | underscore
  • Početna vrijednost: auto
  • Odnosi se na: elemente koji prihvaćaju unos
  • Naslijeđeno: da
  • Postoci: n / a
  • Izračunata vrijednost: navedena ključna riječ
  • Vrsta animacije: prema izračunatoj vrijednosti

Vrijednosti

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

Trenutno nemamo puno podrške za preglednike caret-shape(pogledajte dolje), ali evo prikaza tih vrijednosti.

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

Podrška preglednika

Ne čini se kao da su dostupni bilo kakvi podaci u Caniuseu, ali s nekim brzim testiranjem evo što sam pronašao:

IE Rub Firefox Krom Safari Opera
Ne Ne Ne Ne Ne svi
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
Ne Ne Ne Ne Ne

Ovo možemo "lažirati"

Iako je podrška za preglednike takva kakva jest, efekt zapravo možemo ponoviti s drugom CSS magijom.

To se vrsta stvari koristi na ovoj animaciji pisaćih strojeva:

Više informacija

  • CSS modul osnovnog korisničkog sučelja razina 4 (radni nacrt)

Povezana svojstva

Almanah 27. siječnja 2021

znak za umetanje

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