V obliki karete - CSS-triki

Anonim

caret-shapeHotel v CSS spreminja obliko besedilnega kazalca v notranjosti urejanje elementov, ki kažejo, uporabnik je tipkanje. Je del modula CSS Basic User Interfaces Level 4, ki je trenutno v stanju delovnega osnutka.

Ko pišem, je kareta majhna utripajoča vrstica, ki sledi vsakemu znaku, ki ga vtipkam.

To caret-shapevrstico lahko spremenimo v nekaj drugega, na primer v blok:

.element ( caret-shape: block; )

Tako bo nastala kareta, ki je bolj podobna tistemu, kar boste morda videli pri vnašanju v ukazno vrstico:

Sintaksa

caret-shape: auto | bar | block | underscore
  • Začetna vrednost: auto
  • Velja za: elemente, ki sprejemajo vnos
  • Podedovano: da
  • Odstotki: n / a
  • Izračunana vrednost: določena ključna beseda
  • Vrsta animacije: po izračunani vrednosti

Vrednote

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

Trenutno nimamo veliko podpore za brskalnike caret-shape(glej spodaj), a tukaj je upodabljanje teh vrednosti.

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

Podpora brskalnika

Zdi se, da v programu Caniuse niso na voljo nobeni podatki, toda z nekaj hitrimi testiranji sem našel naslednje:

IE Rob Firefox Chrome Safari Opera
Ne Ne Ne Ne Ne Vse
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
Ne Ne Ne Ne Ne

To lahko "ponaredimo"

Čeprav je podpora brskalnika takšna, kot je, lahko učinek dejansko ponovimo z drugimi čarovniki CSS.

Takšna stvar se uporablja pri tej animaciji pisalnega stroja:

Več informacij

  • Modul osnovnega uporabniškega vmesnika CSS 4. stopnja (delovni osnutek)

Sorodne lastnosti

Almanah 27. januarja 2021

caret

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