Caret-vorm - CSS-trucs

Anonim

De caret-shapeeigenschap in CSS verandert de vorm van de tekstcursor in bewerkbare elementen die aangeven dat een gebruiker aan het typen is. Het maakt deel uit van de CSS Basic User Interfaces Module Level 4, die momenteel de Working Draft-status heeft.

Terwijl ik dit schrijf, is de cursor de kleine knipperende balk die volgt op elk karakter dat ik typ.

We kunnen gebruiken caret-shapeom die balk te veranderen in iets anders, bijvoorbeeld een blok:

.element ( caret-shape: block; )

Dat levert een caret op die meer lijkt op wat u zou kunnen zien wanneer u in de opdrachtregel typt:

Syntaxis

caret-shape: auto | bar | block | underscore
  • Beginwaarde: auto
  • Is van toepassing op: elementen die invoer accepteren
  • Overgenomen: ja
  • Percentages: nvt
  • Berekende waarde: gespecificeerd trefwoord
  • Animatietype: op berekende waarde

Waarden

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

We hebben momenteel niet veel browserondersteuning caret-shape(zie hieronder), maar hier is een weergave van die waarden.

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

Browser-ondersteuning

Het lijkt erop dat er geen gegevens beschikbaar zijn in Caniuse, maar met wat snelle tests heb ik het volgende gevonden:

D.W.Z Rand Firefox Chrome Safari Opera
Nee Nee Nee Nee Nee Alle
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
Nee Nee Nee Nee Nee

We kunnen dit "faken"

Hoewel browserondersteuning is wat het is, kunnen we het effect daadwerkelijk repliceren met andere CSS-magie.

Dat is het soort ding dat wordt gebruikt op deze typemachine-animatie:

Meer informatie

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

Gerelateerde eigenschappen

Almanac op 27 januari 2021

dakje

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