Vaiba kuju - CSS-trikid

Anonim

caret-shapeVara CSS muudab kuju kursor sees muudetav elemente, mis näitab kasutaja kirjutab. See on osa CSS-i kasutajaliideste 4. mooduli moodulist, mis on praegu tööprojekti olekus.

Nagu ma kirjutan, on see märk väike vilkuv riba, mis järgib igat sisestatud märki.

Saame caret-shapeselle riba muuta millekski muuks, näiteks plokiks:

.element ( caret-shape: block; )

Nii saadakse märkmik, mis sarnaneb rohkem käsureale tippimisel:

Süntaks

caret-shape: auto | bar | block | underscore
  • Algne väärtus: auto
  • Kehtib elementide jaoks, mis aktsepteerivad sisendit
  • Päritud: jah
  • Protsendid: n / a
  • Arvutatud väärtus: määratud märksõna
  • Animatsiooni tüüp: arvutatud väärtuse järgi

Väärtused

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

caret-shapePraegu pole meil palju brauserituge (vt allpool), kuid siin on nende väärtuste renderdamine.

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

Brauseri tugi

Tundub, et Caniuse'is pole mingeid andmeid saadaval, kuid mõne kiire testimise abil leidsin siin:

IE Edge Firefox Chrome Safari Ooper
Ei Ei Ei Ei Ei Kõik
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
Ei Ei Ei Ei Ei

Me võime seda "võltsida"

Kuigi brauseritugi on see, mis see on, saame efekti tegelikult korrata muu CSS-i maagiaga.

See on selline asi, mida selles kirjutusmasina animatsioonis kasutatakse:

Rohkem informatsiooni

  • CSS-i kasutajaliidese 4. moodul (tööjoonis)

Seotud omadused

Almanahh 27. jaanuaril 2021

caret

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